4

我想知道jQuery 表单插件相对于序列化有哪些优势？

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

表单插件还有什么可以阻止多次回发吗？我通常使用Ajax 管理器插件来停止重复的 ajax 帖子，但我认为我不能将它与 Form Plugin 一起使用。

谢谢

4

5 回答 5

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
  }
});
于 2011-03-08T20:57:49.957 回答
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 Forms Plugin 都会序列化表单，您必须在提交到服务器之前进行序列化。jQuery 表单插件只是在幕后序列化表单。上面的示例不处理来自服务器的任何响应。
使用下面的代码，您可以将响应附加到其类属性包含“结果”的元素。

$('#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/以获取有关该插件的更多信息。

于 2011-03-08T23:14:21.070 回答
2

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

来自文件选择元素的数据未序列化

该插件可以毫无问题地处理文件上传。

于 2011-03-09T09:01:33.107 回答
1

当任务像序列化和提交表单一样简单时，您不需要专门的表单插件。插件可以包含您可能永远不会使用或需要的功能。此外，如果您的 jQuery 知识有限或者您不太熟悉插件的创建方式，那么按照您需要的方式自定义它并不是一件容易的事。我选择一个插件，一个任务太复杂而无法创建，在这种情况下，如果已经有一个插件，为什么要重新发明轮子。一个示例是带有 HSB 控件的颜色选择器。如果您不知道颜色是如何工作的，那么进行研究和创建自己的颜色选择器的时间和精力将是最重要的。

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

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

在http://api.jquery.com/jQuery.post/#example-3阅读有关 $.post() 的更多信息

现在，如果你觉得你需要用你的表单做一些复杂的事情，并且这些功能已经在一些插件中可用，那么试试它并看看它是如何为你工作的并没有什么坏处。

于 2011-03-06T22:25:10.727 回答
0

表单插件很有用，因为您可以在一次调用中通过 ajax 提交表单，该表单具有与 $.ajax 提供的相同选项功能。这是一种简单地劫持接口以增强其行为的好方法。它也很好，因为它可以通过 faux-ajax (iframe) 顺利处理文件上传，而无需您进行任何修改。

据我所知，表单插件本身并没有做任何事情来避免多次提交。我在一个非常大的项目中使用插件来处理各种事情，我通常通过一些额外的代码自己处理，以跟踪表单是否处于中间提交状态，并避免进入函数再次提交。

于 2011-03-06T15:28:11.873 回答