使用AJAX和jQuery提交表单

看起来这应该是jQuery内置的东西而不需要多行代码,但我找不到"简单"的解决方案.说,我有一个HTML表单:

    
    
    
         
         Good
         Bad
    

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

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

我错过了什么？

1> rfunduk..：

---

首先给你的表单一个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 文档非常非常好.

---

由于此代码处理在更改选择框时提交表单,因此如果表单中有``则无关紧要.如果表单中有提交按钮,则只需要在表单上处理`submit`事件,并阻止默认操作.再次[docs](http://api.jquery.com/submit/)来救援:)

---

一个非常重要的一点,对许多人来说可能是完全显而易见的,但对于我来说绝对不是这样,这里省略了,在这个主题的所有其他SO帖子中,为了获得成功,你必须确保你正在使用的按钮触发导致通过ajax提交表单的事件IS NOT type submit!否则这将永远失败.这里的序列化方法很整洁.

2> Darin Dimitr..：

---

有一个很好的表单插件,允许您异步发送HTML表单.

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

要么

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

立即提交表格

3> Chris Bartow..：

---

这就是最终的工作.

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