使用 AJAX 和 jQuery 提交表单答案

【问题标题】：Submit form using AJAX and jQuery使用 AJAX 和 jQuery 提交表单
【发布时间】：2010-09-30 07:39:52
【问题描述】：

看起来这应该是 jQuery 内置的东西，而不需要多于几行代码，但我找不到“简单”的解决方案。比如说，我有一个 HTML 表单：

<form method="get" action="page.html">
    <input type="hidden" name="field1" value="value1" />
    <input type="hidden" name="field2" value="value2" />
    <select name="status">
         <option value=""></option>
         <option value="good">Good</option>
         <option value="bad">Bad</option>
    </select>
</form>

当有人更改选择字段时，我想使用 ajax 提交表单以更新数据库。我认为有一些方法可以在不手动创建值/属性的情况下执行以下操作，只需将它们全部发送，例如：

$("select").change(function(){
    $.get("page.html?" + serializeForm());
});

我错过了什么？

【问题讨论】：

Re：更新，您可能不希望这是一个 GET 请求，因为您正在将数据传递给服务器。但是，是的，这是一般的想法。不客气:)
这是我将表单数据发布到服务器tryconcepts.blogspot.in/2012/02/…的方式@

标签： jquery ajax serialization

【解决方案1】：

首先给你的表单一个id属性，然后使用这样的代码：

$(document).ready( function() {
  var form = $('#my_awesome_form');

  form.find('select:first').change( function() {
    $.ajax( {
      type: "POST",
      url: form.attr( 'action' ),
      data: form.serialize(),
      success: function( response ) {
        console.log( response );
      }
    } );
  } );

} );

所以这段代码使用.serialize()从表单中提取相关数据。它还假设您关心的选择是表单中的第一个。

供将来参考，jQuery docs 非常非常好。

【讨论】：

非常重要的一点，对很多人来说可能是完全显而易见的，但对我来说绝对不是这样确保您用于触发导致通过 ajax 提交表单的事件的按钮不是类型提交！否则这将永远失败。这里的序列化方法很简洁。
由于此代码处理在选择框更改时提交表单，因此表单中是否有<input type='submit' /> 并不重要。如果表单中有提交按钮，则只需处理表单上的submit 事件并阻止默认操作。 docs 再次来拯救这个:)

【解决方案2】：

有一个很好的form plugin 允许您异步发送 HTML 表单。

$(document).ready(function() { 
    $('#myForm1').ajaxForm(); 
});

或

$("select").change(function(){
    $('#myForm1').ajaxSubmit();
});

立即提交表格

【讨论】：

【解决方案3】：

这就是最终的工作。

$("select").change(function(){
    $.get("/page.html?" + $(this).parent("form").find(":input").serialize()); 
});

【讨论】：

虽然不会提交选择的值