使用 jQuery 提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1200266/
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
Submit a form using jQuery
提问by mehul
I want to submit a form using jQuery. Can someone provide the code, a demo or an example link?
我想使用 jQuery 提交表单。有人可以提供代码、演示或示例链接吗？
回答by tvanfosson
It depends on whether you are submitting the form normally or via an AJAX call. You can find lots of information at jquery.com, including documentation with examples. For submitting a form normally, check out the submit()method to at that site. For AJAX, there are many different possibilities, though you probably want to use either the ajax()or post()methods. Note that post()is really just a convenient way to call the ajax()method with a simplified, and limited, interface.
这取决于您是正常提交表单还是通过 AJAX 调用提交表单。您可以在jquery.com 上找到大量信息，包括带有示例的文档。要正常提交表单，请查看submit()该站点的方法。对于AJAX，有许多不同的可能性，尽管您可能想要使用ajax()或post()方法。请注意，这post()实际上只是一种ajax()使用简化且有限的接口调用方法的便捷方式。
A critical resource, one I use every day, that you should bookmark is How jQuery Works. It has tutorials on using jQuery and the left-hand navigation gives access to all of the documentation.
我每天都在使用的一项重要资源，您应该将其加入书签，那就是jQuery 的工作原理。它有使用 jQuery 的教程，左侧导航可以访问所有文档。
Examples:
例子：
Normal
普通的
$('form#myForm').submit();
AJAX
AJAX
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
// ... do something with response from server
},
'json' // I expect a JSON response
);
});
$('input#submitButton').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// ... do something with the data...
}
});
});
Note that the ajax()and post()methods above are equivalent. There are additional parameters you can add to the ajax()request to handle errors, etc.
请注意，上面的ajax()和post()方法是等效的。您可以将其他参数添加到ajax()请求中以处理错误等。
回答by Draco
You will have to use $("#formId").submit().
您将不得不使用$("#formId").submit().
You would generally call this from within a function.
您通常会在函数内调用它。
For example:
例如：
<input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$("#formId").submit();
}
</script>
You can get more information on this on the Jquery website.
您可以在Jquery 网站上获得更多信息。
回答by womd
when you have an existing form, that should now work with jquery - ajax/post now you could:
当您有一个现有表单时，它现在应该可以与 jquery 一起使用 - ajax/post 现在您可以：
- hang onto the submit - event of your form
- prevent default functionality of submit
do your own stuff
$(function() { //hang on event of form with id=myform $("#myform").submit(function(e) { //prevent Default functionality e.preventDefault(); //get the action-url of the form var actionurl = e.currentTarget.action; //do your own request an handle the results $.ajax({ url: actionurl, type: 'post', dataType: 'application/json', data: $("#myform").serialize(), success: function(data) { ... do something with the data... } }); }); });
- 挂在表单的提交事件上
- 防止提交的默认功能
做你自己的事
$(function() { //hang on event of form with id=myform $("#myform").submit(function(e) { //prevent Default functionality e.preventDefault(); //get the action-url of the form var actionurl = e.currentTarget.action; //do your own request an handle the results $.ajax({ url: actionurl, type: 'post', dataType: 'application/json', data: $("#myform").serialize(), success: function(data) { ... do something with the data... } }); }); });
Please note that, in order for the serialize()function to work in the example above, all form elements need to have their nameattribute defined.
请注意，为了使serialize()函数在上面的示例中工作，所有表单元素都需要name定义其属性。
Example of the form:
表格示例：
<form id="myform" method="post" action="http://example.com/do_recieve_request">
<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>
@PtF - the data is submitted using POST in this sample, so this means you can access your data via
@PtF - 在此示例中使用 POST 提交数据，因此这意味着您可以通过
$_POST['dataproperty1']
, where dataproperty1 is a "variable-name" in your json.
，其中 dataproperty1 是 json 中的“变量名”。
here sample syntax if you use CodeIgniter:
如果您使用 CodeIgniter，这里是示例语法：
$pdata = $this->input->post();
$prop1 = $pdata['prop1'];
$prop1 = $pdata['prop2'];
回答by gernberg
In jQuery I would prefer the following:
在 jQuery 中，我更喜欢以下内容：
$("#form-id").submit()
But then again, you really don't need jQuery to perform that task - just use regular JavaScript:
但话又说回来，您真的不需要 jQuery 来执行该任务——只需使用常规 JavaScript：
document.getElementById("form-id").submit()
回答by AdamSane
回答by A.Z. Soft
For information
if anyone use
有关信息，
如果有人使用
$('#formId').submit();
Do not something like this
不要这样
<button name = "submit">
It took many hours to find me that submit() won't work like this.
我花了好几个小时才发现 submit() 不能像这样工作。
回答by Chintan Thummar
Use it to submit your form using jquery. Here is the link http://api.jquery.com/submit/
使用它来使用 jquery 提交表单。这是链接http://api.jquery.com/submit/
<form id="form" method="post" action="#">
<input type="text" id="input">
<input type="button" id="button" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "#button" ).click(function() {
$( "#form" ).submit();
});
});
</script>
回答by Hymany
this will send a form with preloader :
这将发送一个带有 preloader 的表单：
var a=$('#yourform').serialize();
$.ajax({
type:'post',
url:'receiver url',
data:a,
beforeSend:function(){
launchpreloader();
},
complete:function(){
stopPreloader();
},
success:function(result){
alert(result);
}
});
i'have some trick to make a form data post reformed with random method http://www.Hymanart4.com/article.html
我有一些技巧可以使用随机方法对表单数据进行修改http://www.Hymanart4.com/article.html
回答by gutschilla
Note that if you already installed a submit event listener for your form, the innner call to submit()
请注意，如果您已经为表单安装了提交事件侦听器，则对 submit() 的内部调用
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// maybe some validation in here
if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});
won'twork as it tries to install a new event listener for this form's submit event (which fails). So you have to acces the HTML Element itself (unwrap from jQquery) and call submit() on this element directly:
将无法工作，因为它试图为此表单的提交事件（失败）安装新的事件侦听器。因此，您必须访问 HTML 元素本身（从 jQquery 解包）并直接在此元素上调用 submit()：
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// note the [0] array access:
if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
});
