Jquery表单插件还是Jquery序列化？

Question

我想知道与 serialization? 相比， jQuery Form Plugin有什么优势

如果我选择使用表单插件，我可以使用jQuery 1.5的新功能吗？

另外，表单插件有没有阻止多次回发的功能呢？我通常使用 Ajax manager 插件来阻止重复的ajax帖子，但我不认为我可以在表单插件中使用它。

谢谢

Answer 1

jQuery表单插件提供了使用ajax处理表单的简单性。它将使用表单属性来确定提交表单的方式和位置。表单的method属性告诉插件要使用的请求类型。表单的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 Forms插件无论如何都会序列化表单，您必须在提交到服务器之前进行序列化。jQuery表单插件只是在后台序列化表单。上面的示例不处理来自服务器的任何响应。

使用下面的代码，您可以将响应附加到class属性包含"result“的元素。

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

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

我不确定您是否可以对它使用延迟方法。我对此表示怀疑，因为它的兼容性是针对1.3.2+的，并且原生ajax方法都封装在插件中。使得延迟对象永远不会从插件内部返回。

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插件有一个成功选项，如果服务器返回200个"OK“响应，就会调用一个函数回调。您还可以查看插件http://jquery.malsup.com/form/的作者网站，了解有关该插件的更多信息。

Answer 2

我刚刚看了一下表单插件，老实说，如果你有一点使用jquery的经验，那就没有理由使用插件了。我看不出有什么是简单地使用普通的jquery不能完成的。如果我需要使用ajax发送完整的表单数据，我会使用serialize。

这就是基本的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
  }
});

Answer 3

如果你想使用Ajax上传文件，那么这个插件是必备的。看一看serializeArray的文档，它清楚地表明：

文件选择元素中的

数据未序列化

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