使用JQuery AJAX提交HTML表单
我试图使用这个例子使用AJAX提交一个HTML表单。
我的html代码：
<form id="formoid" action="studentFormInsert.php" title="" method="post"> <div><label class="title">First Name</label><input type="text" id="name" name="name" ></div> <div><label class="title">Name</label><input type="text" id="name2" name="name2" ></div> <div><input type="submit" id="submitButton" name="submitButton" value="Submit"></div> 我的脚本：
<script type="text/javascript"> $(document).ready(function() { $('#formoid').ajaxForm(function() { alert("Thank you for your comment!"); }); }); </script>
这是行不通的，我甚至没有收到警报消息，当我提交时，我不想redirect到另一个页面，我只是想显示警报消息。
有没有一个简单的方法呢？
PS：我有几个领域，我刚刚举了两个例子。
AJAX的快速描述
AJAX只是Asyncronous Javascript或XML（在大多数较新的情况下JSON）。 因为我们正在执行ASYNC任务，所以我们可能会为用户提供更愉快的UI体验。 在这个特定的情况下，我们正在使用AJAX进行FORM提交。
真的很快有4个一般的networking操作GET ， POST ， PUT和DELETE ; 这些与SELECT/Retreiving DATA ， SELECT/Retreiving DATA ， UPDATING/UPSERTING DATA和DELETING DATA直接对应。 默认的HTML / ASP.Net webform / PHP / Python或其他任何form动作是“提交”，这是一个POST动作。 正因为如此，以下都将描述做POST。 有时候，有了http，你可能需要一个不同的动作，并可能想要利用.ajax 。
我的代码专门为你（在代码注释中描述）：
<!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.js"></script> </head> <body> <form id="formoid" action="studentFormInsert.php" title="" method="post"> <div> <label class="title">First Name</label> <input type="text" id="name" name="name" > </div> <div> <label class="title">Name</label> <input type="text" id="name2" name="name2" > </div> <div> <input type="submit" id="submitButton" name="submitButton" value="Submit"> </div> </form> <script type='text/javascript'> /* attach a submit handler to the form */ $("#formoid").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get the action attribute from the <form action=""> element */ var $form = $( this ), url = $form.attr( 'action' ); /* Send the data using post with element id name and name2*/ var posting = $.post( url, { name: $('#name').val(), name2: $('#name2').val() } ); /* Alerts the results */ posting.done(function( data ) { alert('success'); }); }); </script> </body> </html>
文档
从jQuery网站$.post文档。
示例 ：使用ajax请求发送表单数据
$.post("test.php", $("#testform").serialize());
示例 ：使用ajax发布表单并将结果放在div中
<!DOCTYPE html> <html> <head> <script src="jquery-1.9.1.js"></script> </head> <body> <form action="/" id="searchForm"> <input type="text" name="s" placeholder="Search..." /> <input type="submit" value="Search" /> </form> <!-- the result of the search will be rendered inside this div --> <div id="result"></div> <script> /* attach a submit handler to the form */ $("#searchForm").submit(function(event) { /* stop form from submitting normally */ event.preventDefault(); /* get some values from elements on the page: */ var $form = $(this), term = $form.find('input[name="s"]').val(), url = $form.attr('action'); /* Send the data using post */ var posting = $.post(url, { s: term }); /* Put the results in a div */ posting.done(function(data) { var content = $(data).find('#content'); $("#result").empty().append(content); }); }); </script> </body> </html>
重要的提示
如果不使用OAuth或至lessHTTPS（TLS / SSL），请不要使用此方法来保护数据（信用卡号码，SSN，任何与PCI，HIPAA或login相关的内容）
var postData = "text"; $.ajax({ type: "post", url: "url", data: postData, contentType: "application/x-www-form-urlencoded", success: function(responseData, textStatus, jqXHR) { alert("data saved") }, error: function(jqXHR, textStatus, errorThrown) { console.log(errorThrown); } })
如果你添加：
jquery.form.min.js
你可以简单地做到这一点：
<script> $('#myform').ajaxForm(function(response) { alert(response); }); // this will register the AJAX for <form id="myform" action="some_url"> // and when you submit the form using <button type="submit"> or $('myform').submit(), then it will send your request and alert response </script>
