使用ajax和jQuery提交表单

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (113)

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

当有人更改SELECT字段时,我希望使用Ajax提交表单来更新数据库。我认为,在不手动创建值/属性的情况下,应该有一些方法来完成以下操作,只需将它们全部发送,例如:

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

我遗漏了什么?

提问于
用户回答回答于

有一个很好的形式插件它允许你异步发送HTML表单。

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

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

立即递交表格

用户回答回答于

先给你的表格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()从表单中提取相关数据。它还假定你所关心的选择是表单中的第一个。

扫码关注云+社区

领取腾讯云代金券