如何使用jQuery发布包含许多字段的表单?

时间:2009-09-11 16:00:29

标签: jquery forms post

虽然可以使用$ .ajax()来执行ajax事务,但我认为它不适合发布大型表单的值。

你如何post一个大型(多个领域)而不是手工输入它们?

7 个答案:

答案 0 :(得分:43)

这个假设背后的理由是什么? POST用于传输比GET更大量的数据。 AJAX POST请求几乎与“普通”POST请求完全相同,它只是由浏览器以略微不同的方式在内部捆绑和处理。一些标题可能略有不同,但数据完全相同。为什么AJAX无法处理“大”形式?

你甚至将它定义为“大型”形式?

修改:感谢您对问题的澄清。我明白你现在在问什么,我知道你来自哪里。对于具有大量输入的表单,将其捆绑到Ajax请求中可能会很麻烦。

由于您正在使用jQuery,因此有一个简单的解决方案。查看serialize()方法。您给它一个表单,它会返回一个包含所有表单输入元素和值的查询字符串,您可以直接将其传递给ajax请求。手册页上有一个示例,说明了它是如何完成的。

你所要做的就是:

$.ajax({
    data: $("form").serialize(),
    //etc.
});

其中"form"是表单的ID。

答案 1 :(得分:10)

如果您不想手动处理每个元素,可能需要使用serialize

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

答案 2 :(得分:6)

您可以使用jQuery.post( url, data, callback, type),因为它更简单jQuery.ajax( options )

使用serialize,您可以自动发送整个表单。

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

更完整的例子:

<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>

这会覆盖默认的post,并使用AJAX执行它。

答案 3 :(得分:1)

如果你还没有尝试过。然后创建一个 BIG 表单(现在不管你的意思),并使用$.ajax()或jQuery Forms插件发布它。你会知道它是否适合这种事情!

编辑: - (编辑后)然后forms plugin适合你!试一试。

答案 4 :(得分:1)

尝试jquery form plugin

它可能完全符合开箱即用的要求。

答案 5 :(得分:1)

我用$ .ajax()发送了相当复杂(大)的表单并且没有问题。我没有通过ajax请求发送文件,但我已经看到它完成了它比传统帖子更好用,因为它在你上传时不会占用浏览器。

根据你对@zombat的评论,我猜你有大量的输入,其中大部分都是空白的。这里有两个建议1)将输入分成不同的形式,只有在触摸/完成时才发送。 2)使用JavaScript检查表单的状态并将信息包装成JSON或XML,而不是发布表单数据,只发布数据结构。

“大”应该不是问题,也许你可以找到一个更好的形容词来描述你的数据,让每个人都知道为什么难以发送。

答案 6 :(得分:0)

你要问的并不难。您所要做的就是收集表单的内容并将其传递给您的服务器(通常使用JSON)。

看一下这个方法:

http://code.tutsplus.com/tutorials/submit-a-form-without-page-refresh-using-jquery--net-59