如何使用 jQuery 发布包含多个字段的表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1411811/
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
How to post a form with many fields with jQuery?
提问by omg
Though $.ajax() can be used to do ajax things, I don't think its fit for posting values of a big form.
虽然 $.ajax() 可以用来做 ajax 的事情，但我认为它不适合发布大表单的值。
How would you posta big form (many fields) without entering all them by hand?
如果post不手动输入所有字段，您将如何制作大表格（许多字段）？
回答by zombat
What is your reasoning behind that assumption? POST is designed for transferring larger amounts of data than GET. An AJAX POST request is almost exactly the same as a "normal" POST request, it's just bundled and handled internally by a browser in a slightly different manner. A couple of headers might be slightly different, but the data is all the same. Why should AJAX fail to handle a "large" form?
你在这个假设背后的推理是什么？POST 设计用于传输比 GET 更大的数据量。AJAX POST 请求与“普通” POST 请求几乎完全相同，它只是由浏览器以稍微不同的方式在内部进行捆绑和处理。几个标题可能略有不同，但数据都是一样的。为什么 AJAX 不能处理“大”表单？
What would you even define as a "large" form anyway?
无论如何，您甚至将什么定义为“大”表单？
Edit:Thanks for the clarification on your question. I understand what you're asking now, and I see where you're coming from. For a form with a lot of inputs, it could be a pain to bundle it up into an Ajax request all the time.
编辑：感谢您对问题的澄清。我明白你现在在问什么，我知道你来自哪里。对于具有大量输入的表单，将其一直捆绑到 Ajax 请求中可能会很痛苦。
Since you're using jQuery, there's an easy solution to this. Check out the serialize()method. You give it a form, and it gives you back a query string of all the form input elements and values which you can pass directly to an ajax request. There's an example there on the manual page that shows how it's done.
由于您使用的是 jQuery，因此有一个简单的解决方案。查看serialize()方法。您给它一个表单，它返回一个包含所有表单输入元素和值的查询字符串，您可以将这些字符串直接传递给 ajax 请求。手册页上有一个示例，显示了它是如何完成的。
All you have to do is this:
你所要做的就是：
$.ajax({
data: $("form").serialize(),
//etc.
});
where "form"is the id of your form.
"form"您的表单的 id在哪里。
回答by anveo
回答by Esteban Küber
You can use jQuery.post( url, data, callback, type), as its simpler to jQuery.ajax( options ).
您可以使用jQuery.post( url, data, callback, type)，因为它更简单jQuery.ajax( options )。
By using serialize, you can send the whole form automatically.
通过使用serialize，您可以自动发送整个表格。
$.post("/post_handler/",
$("form#my_form").serialize(),
function(json){
/*your success code*/
}, "json");
A more complete example:
一个更完整的例子：
<script>
$().ready(function(){
$("form#my_form submit").click(function(){
$.post("/post_handler/",
$("form#my_form").serialize(),
function(json){
/*your success code*/
}, "json");
return false;
});
}
</script>
<form id="my_form" action="/post_handler/" method="post">
<input type="text" name="text1" value="my text 1" />
<input type="text" name="text2" value="my text 2" />
<input type="submit" name="submit_button" value="Send" />
</form>
This would override the default post, and perform it with AJAX.
这将覆盖默认值post，并使用 AJAX 执行它。
回答by mkoryak
Try the jquery form plugin.
试试jquery 表单插件。
It probably does exactly what you need to do out of the box.
它可能正是您需要立即完成的工作。
回答by John F. Miller
I've sent rather complex (large) forms with $.ajax() and had no issue. I have not sent files over ajax requests, but I've seen it done and it works better then traditional posts because it doesn't tie up the browser while you are uploading.
我用 $.ajax() 发送了相当复杂（大）的表单并且没有问题。我没有通过 ajax 请求发送文件，但我已经看到它完成并且它比传统帖子更好用，因为它在您上传时不会占用浏览器。
Based on your comment to @zombat, My guess it that you have a very large number of inputs, most of which are going to be blank most of the time. Two suggestions here 1) split the inputs into separate forms and only send each as soon as it is touched/completed. 2) examine the state of your form with JavaScript and wrap the information into JSON or XML, and Instead of posting the form data, post just the data structure.
根据您对@zombat 的评论，我猜您有大量输入，其中大部分时间大部分时间都是空白的。这里有两个建议 1) 将输入拆分为单独的表单，并且仅在触摸/完成后立即发送每个表单。2) 使用 JavaScript 检查表单的状态并将信息包装到 JSON 或 XML 中，而不是发布表单数据，只发布数据结构。
"Large" should not be a problem, perhaps you can find a better adjective to describe your data that will let everyone know why it is hard to send.
“大”应该不是问题，也许你可以找到一个更好的形容词来描述你的数据，让大家知道为什么很难发送。
回答by TheVillageIdiot
If you haven't tried it yet. Then create a BIGform (now whatever you mean by that) and use $.ajax()or jQuery Forms plugin to post it. You will know if it is for this kind of things or not!
如果你还没有尝试过。然后创建一个大表单（现在不管你的意思是什么）并使用$.ajax()或 jQuery Forms 插件来发布它。你会知道它是否适合这种事情！
EDIT:- (after your edit) Then forms pluginis for you! Give it a shot.
编辑：-（编辑后）然后表单插件适合您！试一试。
回答by Santi
What you're asking is not hard. All you have to do is collect the content of the form and pass it to your server (usually using JSON).
你问的不难。您所要做的就是收集表单的内容并将其传递到您的服务器（通常使用 JSON）。
Take a look at this howto:
看看这个方法：
http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59
http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59
