使用AJAX和jQuery提交表单

看起来这应该是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>

我缺少什么？

有一个nice，允许您异步发送HTML表单

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

或

---

要立即提交表单

请首先为表单指定一个

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非常非常好。

这就是最终的效果

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

---

Re：更新时，您可能不希望这是一个GET请求，因为您正在向服务器传递数据。但是，是的，这是总的想法。不客气：）这是我将表单数据发布到服务器上的操作的方式，这是非常重要的一点，这对很多人来说可能是非常明显的，但对我来说绝对不是这样。在这里以及关于这个主题的所有其他so帖子中都省略了这一点。为了成功，您必须确保您用来触发通过ajax提交表单的事件的按钮不是类型submit！否则这将永远失败。这里的序列化方法很简洁。因为这段代码处理在更改选择框时提交表单，所以表单中是否有

并不重要。如果表单中确实有提交按钮，则只需处理表单上的

submit

事件，并阻止默认操作。再次说明：）这不会提交select的值

$(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 );
      }
    } );
  } );

} );

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