回答

3

jQuery表单插件提供了与表单一起使用ajax的简单性。它将使用表单属性来确定如何以及在何处提交表单。表单的方法属性告诉插件要使用的请求类型。表单的action属性告诉它在哪里提交表单。

考虑一个实例的形式是这样的:

<form id="myform" action="submit.php" method="post"> 
<!--inputs and submit button go here--> 
</form> 

在本质上它可以让你写:

$('#myform').ajaxForm(); 

代替

$.post("submit.php", $("#myform").serialize()); 

jQuery的表格插件也将让您通过Ajax从您的代码提交。

$('#myform').ajaxSubmit(); 

jQuery的形式插件无论如何都会序列化的形式,你将不得不序列提交到服务器之前。 jQuery Form Plugin只是在后台序列化表单。上述示例不处理来自服务器的任何响应。
使用下面的代码,您可以将响应追加到类属性包含“result”的元素。

$('#myform').ajaxForm({ target : ".result"}); 

您可以使用jQuery支持的任何选择器作为目标选项。

我不确定您是否可以使用延期方法。我对此表示怀疑,因为兼容性适用于1.3.2以上版本,并且本地ajax方法被封装在插件中。这样Deferred对象永远不会从插件内部返回。

jQuery表单确实有一个可以使用的beforeSubmit选项。因此,添加到上面的代码,我们得到:

$('#myform').ajaxForm({ target: ".result", beforeSubmit: function(arr, $form, options) { 
     // arr: The array of form data 
     // The array of form data takes the following form: 
     // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 

     //some code to check if we already submitted the form 

     // return false to cancel submit     
    } 
}); 

但是,我会建议不要这样做,如果用户完成提交表单后的页面。它只会增加您的客户端代码的不必要的复杂性。如果用户在表单提交后在页面上做其他事情,应该可以。 jQuery Forms Plugin具有成功选项,如果服务器返回200“OK”响应,则会调用函数回调。您还可以查看插件http://jquery.malsup.com/form/的作者网站了解更多插件信息。

0

形式插件是在有用的,你可以在一个呼叫,提交一个表单阿贾克斯用相同的选项能力,作为$就优惠。这是一种简单地劫持界面以增强其行为的好方法。这也很好,因为它可以通过人造ajax(iframe)顺利处理文件上传,而无需修改任何内容。

据我所知,表单插件本身并没有做任何事情来避免多次提交。我在一个非常大的项目上使用插件来处理各种事情,而且我通常会通过一些附加代码来处理这个问题,以跟踪表单是否处于中间提交状态,并且如果是,请避免输入函数再次提交。

1

当任务与序列化和提交表单一样简单时,您不需要专门的表单插件。插件可以包含您可能永远不会使用或需要的所有功能。另外,如果你对jQuery的知识是有限的,或者你不太了解如何创建插件,那么以你需要的方式定制它并不是一件容易的事情。我选择一个插件的任务太复杂了,在这种情况下,为什么重新发明轮子,如果已经有插件的话。一个例子是带有HSB控件的颜色选择器。如果你不知道颜色是如何工作的,那么做研究和创建自己的颜色选择器的时间和精力就会超过最高。

您可以使用以下2行作为序列化和提交表单的基本方法。

var data = $(form).serialize(); 
$.post('post.php', '&'+data); 

了解更多关于$。员额()在http://api.jquery.com/jQuery.post/#example-3

现在,如果你觉得你需要做复杂的事情与你的形式与这些功能已经在一些插件可用,那么它不会伤害到试试看看它是如何为你工作的。

3

我刚刚看过表格插件,说实话,如果你有一点使用jQuery的经验,没有理由使用插件。我没有看到任何你不能通过简单的方式使用普通的jQuery来完成的任何事情。 如果我需要使用ajax发送我的完整表单数据,我使用序列化。

这就是基本的ajax调用需要的所有东西,插件可以做些什么来简化这个过程?

$.ajax({ 
    type: 'POST', 
    url: post/to/this/url, 
    data: $("#myForm").serializeArray(), 
    success: function() { 
    // Woopie success! 
    window.location.href = successurl; 
    }, 
    error: function(jqXHR, textStatus, errorThrown){ 
    // do something with errors 
    } 
}); 
+2

怎么样上传文件? – psousa 2011-03-09 10:08:14

+0

我猜,除非你需要这些额外的方法和文件上传,那么你应该使用它,否则我想这是没有意义的。 – chobo2 2011-03-09 16:06:31

+0

还有一个好处:使用这个插件可以更轻松地从非Ajax形式的版本升级到带有Ajax的版本。而且,创建Hijax场景要容易得多。 – psousa 2011-03-09 16:51:34

2

如果你想使用Ajax上传文件,那么这个插件是必备的。综观serializeArray文档就明确指出:从文件

数据选择元素不是序列化

这个插件处理文件上传,没有任何问题。