blocks|key|1240428|text|你所要求的并不难。您所要做的就是收集表单的内容并将其传递给服务器(通常使用JSON)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1240429|请看下面的方法：|1240430|http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59|offset|length|1240431|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|2I|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@$F|R|G|S|1|T]]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|E]]]]

<p>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).</p>

<p>Take a look at this howto:</p>

<p><a href="http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59" rel="nofollow noreferrer">http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59</a></p>


blocks|key|1240487|text|你可以使用jQuery.post(+url,+data,+callback,+type)，因为它比jQuery.ajax(+options+)更简单。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1240488|通过使用serialize，您可以自动发送整个表单。|1240489|$.post("/post_handler/",
++++$("form#my_form").serialize(),
++++function(json){
++++++++/*your+success+code*/
++++},+"json");|code-block|syntax|javascript|1240490|一个更完整的例子：|1240491|<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>|1240492|这将覆盖默认的post，并使用AJAX执行它。|1240493|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype|1|http://docs.jquery.com/Ajax/jQuery.ajax#options|2|http://docs.jquery.com/Ajax/serialize^0|5|13|1D|M|5|13|0|1D|M|1|0|4|9|4|9|2|0|0|0|0|7|4|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@$9|19|A|1A|1|1B]|$9|1C|A|1D|1|1E]]|E|$]]|$1|F|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|H|3|I|5|J|7|1L|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1M|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]|10|$5|V|W|X|E|$Y|11]]|12|$5|V|W|X|E|$Y|13]]]]

<p>You can use <a href="http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype" rel="nofollow noreferrer"><code>jQuery.post( url, data, callback, type)</code></a>, as its simpler to <a href="http://docs.jquery.com/Ajax/jQuery.ajax#options" rel="nofollow noreferrer"><code>jQuery.ajax( options )</code></a>.</p>

<p>By using <a href="http://docs.jquery.com/Ajax/serialize" rel="nofollow noreferrer"><code>serialize</code></a>, you can send the whole form automatically.</p>

<pre><code>$.post("/post_handler/",
    $("form#my_form").serialize(),
    function(json){
        /*your success code*/
    }, "json");
</code></pre>

<p>A more complete example:</p>

<pre><code>&lt;script&gt;
$().ready(function(){
    $("form#my_form submit").click(function(){
        $.post("/post_handler/",
            $("form#my_form").serialize(),
            function(json){
                /*your success code*/
            }, "json");
        return false;
    });
}
&lt;/script&gt;
&lt;form id="my_form" action="/post_handler/" method="post"&gt;
  &lt;input type="text" name="text1" value="my text 1" /&gt;
  &lt;input type="text" name="text2" value="my text 2" /&gt;
  &lt;input type="submit" name="submit_button" value="Send" /&gt;
&lt;/form&gt;
</code></pre>

<p>This would override the default <code>post</code>, and perform it with AJAX.</p>


blocks|key|1455410|text|试试jquery+form+plugin吧。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1455411|它可能做的正是您开箱即用的工作。|1455412|entityMap|0|LINK|mutability|MUTABLE|url|http://malsup.com/jquery/form/^0|2|I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>Try the <a href="http://malsup.com/jquery/form/" rel="nofollow noreferrer">jquery form plugin</a>.</p>

<p>It probably does exactly what you need to do out of the box.</p>


blocks|key|1455439|text|如果您不想手动处理每个元素，则可能希望使用serialize。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1455440|$.ajax({
+++type:+"POST",
+++url:+"form.php",
+++data:+$("#form_id").serialize()
+++success:+function(msg)+{
+++++alert("Form+Submitted:+"+%2B+msg);
+++}
+});|code-block|syntax|javascript|1455441|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.jquery.com/Ajax/serialize^0|L|9|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You probably want to use <a href="http://docs.jquery.com/Ajax/serialize" rel="noreferrer">serialize</a> if you don't want to manually deal with each element.</p>

<pre><code>$.ajax({
   type: "POST",
   url: "form.php",
   data: $("#form_id").serialize()
   success: function(msg) {
     alert("Form Submitted: " + msg);
   }
 });
</code></pre>


blocks|key|1455530|text|我已经用$.ajax()发送过相当复杂(大)的表单，没有任何问题。我没有通过ajax请求发送文件，但我见过这样做，它比传统的帖子工作得更好，因为它不会在你上传时占用浏览器。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1455531|根据你对@zombat的评论，我猜你有大量的输入，其中大部分都是空白的。这里有两个建议:+1)将输入拆分成单独的表单，只在触摸/完成后才发送每个表单。2)使用JavaScript检查表单的状态，并将信息封装到JSON或XML中，而不是发布表单数据，只发布数据结构。|1455532|“大”应该不是问题，也许你可以找到一个更好的形容词来描述你的数据，让每个人都知道为什么它很难发送。|1455533|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>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.  </p>

<p>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. </p>

<p>"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.</p>


<p>Though $.ajax() can be used to do ajax things, I don't think its fit for posting values of a big form.</p>

<p>How would you <code>post</code> a big form (many fields) without entering all them by hand?</p>


How to post a form with many fields with jQuery?

数据结构

服务器

JSON

虽然$.ajax()可以用来做ajax的事情，但我认为它不适合发布大表单的值。如何在不手动输入所有字段的情况下post一个大表单(多个字段)？

问如何使用jQuery发布包含多个字段的表单？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery发布包含多个字段的表单？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery发布包含多个字段的表单？
EN