Question

我有一个复杂的表单，包括大约40个输入字段和复选框。

e.g。

<form action="send.php" id="myForm" method="post">
  <input type="text" name="firstname">
  <input type="text" name="lastname">
  ...
  <input type="text" name="age">

  <input type="checkbox" name="mycheckgroup1[]">
  <input type="checkbox" name="mycheckgroup1[]">
  <input type="checkbox" name="mycheckgroup1[]">

  <input type="checkbox" name="mycheckgroup2[]">
  ...
  <input type="checkbox" name="mycheckbox_1">
</form>

<div id="result">Here is your result</div>

所以，我有不同的表单字段。有没有办法让所有这些都被发送到“结果”-div中的“send.php”（使用jQuery ajax / post）？当然他们应该保留他们的名字： - ）

非常感谢最好的祝福扬

Answer 1

只需在jQuery表单对象上调用serialize（也不要忘记调用e.preventDefault()来停止表单提交）：

$('#myForm').submit(function(e){
    // Stop form submitting normally
    e.preventDefault();
    var $form = $(this);
    $.ajax({
        url: $form.attr("action"),
        type: $form.attr("method"),
        data: $form.serialize()
    }).done(function(data){
        $("#result").html(data);           // As suggested by HarryFink
    });
});

此示例还从表单属性中获取url和其他设置。

Serialize会将所有输入（包括隐藏输入）转换为名称/值对。这看起来与服务器相同，就像提交页面一样。

Answer 2

是的，你可以序列化你的，然后用这样的ajax发送它：

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        type: $(this).attr('method'),
        data: $(this).serialize(),
        url: $(this).attr('action')
    });
});

jQuery：如何使用post（）将复杂的表单发送到div？

2 个答案: