如何使用 Jquery 的 AJAX 提交复杂的表单？答案

【问题标题】：How to submit a complex form using Jquery's AJAX?如何使用 Jquery 的 AJAX 提交复杂的表单？
【发布时间】：2009-02-26 11:50:29
【问题描述】：

我正在尝试使用 Jquery 的 ajax 提交表单。它有几个文本框、一些复选框和多个选项的下拉菜单（即可以选择多个选项）。

这里有人告诉我，我可以使用获取所有选定复选框的值

$("input:checkbox[name=type]:checked")

然后我可以遍历上面代码返回的所有值，将它们分配给这样的数组：

var types=new Array();

    $.each(cboxes, function()
      {
         types[types.length]=$(this).val();
      }
    );

并尝试使用以下方式提交表单：

var someField=$("#someField").val();
var someField2=$("#someField2").val();
var data={field1 : someField, field2=someField2, s_types:types};
$.post("signup.php?type=p",types);

但这不起作用，特别是复选框没有正确提交。我怎样才能让它发挥作用？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

没有必要遍历每个字段来获取表单值。 jQuery 有一种将表单输入序列化为查询字符串的方法。你可以这样做：

$.ajax({
  url: "mybackend.php",
  data: $("#myForm").serialize(),
  success: function(e) { // do something on success },
  error: function(e) { // do something on error }
});

请记住，javascript 帖子始终以 UTF-8 格式发送数据，因此如果您打算发送带有国际字符的文本，请确保您在后端期待这种格式。

【讨论】：

【解决方案2】：

我建议使用插件来做到这一点。看看这个form plug-in。它还可以很好地与validation plug-in 集成。

【讨论】：

这是最好的主意。它还允许您通过 ajax 上传文件。

【解决方案3】：

默认的 jQuery $.param 不处理数组 (by design)，因此您不能按原样使用 $.serialize。使用插件，如kgiannakis' answer 中建议的那样，或者覆盖 $.param 函数，以便它可以正确处理数组：

function($) {
  $.param = function(a) {
    var s = [];
    if (a.constructor == Array || a.jquery) 
      jQuery.each(a, function() { s.push( encodeURIComponent(this.name) + "=" + encodeURIComponent( this.value ) ); });
    else
      for (var j in a)
        if (a[j] && a[j].constructor == Array) jQuery.each( a[j], function(){ s.push( encodeURIComponent(j) + "[]=" + encodeURIComponent( this ) ); });
        else s.push(encodeURIComponent(j) + "=" + encodeURIComponent(a[j]));
    return s.join("&").replace(/%20/g, "+");
  };
})(jQuery);

...然后使用 $.serialize，就像 Danita 建议的那样。

【讨论】：