使用 Jquery AJAX 提交 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16323360/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Submitting HTML form using Jquery AJAX
提问by Oliveira
Im trying to submit a HTML form using AJAX using this example.
我正在尝试使用此示例使用 AJAX 提交 HTML 表单。
My HTML code:
我的 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>
</form>
My script:
我的脚本：
<script type="text/javascript">
$(document).ready(function() {
$('#formoid').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
This is not working, I'm not even getting the alert message and when I submit I don't want to redirect to another page, I just want to show the alert message.
这不起作用，我什至没有收到警报消息，当我提交时，我不想重定向到另一个页面，我只想显示警报消息。
Is there a simple way of doing it?
有没有简单的方法？
PS: I have several fields, I have just put two as an example.
PS：我有几个字段，我只是举了两个作为例子。
回答by abc123
Quick Description of AJAX
AJAX 快速描述
AJAX is simply Asyncronous JSON or XML (in most newer situations JSON). Because we are doing an ASYNC task we will likely be providing our users with a more enjoyable UI experience. In this specific case we are doing a FORM submission using AJAX.
AJAX 只是异步 JSON 或 XML（在大多数较新的情况下为 JSON）。因为我们正在执行 ASYNC 任务，所以我们可能会为用户提供更愉快的 UI 体验。在这种特定情况下，我们使用 AJAX 进行 FORM 提交。
Really quickly there are 4 general web actions GET, POST, PUT, and DELETE; these directly correspond with SELECT/Retreiving DATA, INSERTING DATA, UPDATING/UPSERTING DATA, and DELETING DATA. A default HTML/ASP.Net webform/PHP/Python or any other formaction is to "submit" which is a POST action. Because of this the below will all describe doing a POST. Sometimes however with http you might want a different action and would likely want to utilitize .ajax.
真的很快有4个一般的网络行动GET，POST，PUT，和DELETE; 这些直接与对应SELECT/Retreiving DATA，INSERTING DATA，UPDATING/UPSERTING DATA，和DELETING DATA。默认的 HTML/ASP.Net webform/PHP/Python 或任何其他form操作是“提交”，这是一个 POST 操作。因此，下面将全部描述执行 POST。然而，有时对于 http，您可能需要不同的操作，并且可能想要利用.ajax.
My code specifically for you (described in code comments):
我专门为您编写的代码（在代码注释中描述）：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/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>
Documentation
文档
From jQuery website $.postdocumentation.
Example: Send form data using ajax requests
示例：使用 ajax 请求发送表单数据
$.post("test.php", $("#testform").serialize());
Example: Post a form using ajax and put results in a div
示例：使用 ajax 发布表单并将结果放入 div
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/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>
Important Note
重要的提示
Without using OAuth or at minimum HTTPS (TLS/SSL) please don't use this method for secure data (credit card numbers, SSN, anything that is PCI, HIPAA, or login related)
在不使用 OAuth 或至少使用 HTTPS (TLS/SSL) 的情况下，请不要将此方法用于安全数据（信用卡号、SSN、任何与 PCI、HIPAA 或登录相关的内容）
回答by Varun S
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);
}
})
回答by Martin Zvarík
If you add:
如果添加：
jquery.form.min.js
jquery.form.min.js
You can simply do this:
你可以简单地这样做：
<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>
NOTE:
笔记：
You could use simple $('FORM').serialize() as suggested in post above, but that will not work for FILE INPUTS... ajaxForm() will.
您可以使用上面帖子中建议的简单 $('FORM').serialize() ，但这不适用于FILE INPUTS... ajaxForm() 会。
