使用AJAX和jQuery提交表单

Question

使用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>当有人更改选择字段时，我想使用ajax提交表单来更新数据库。我认为有一些方法可以在不手动创建值/属性的情况下执行以下操作，只需将它们全部发送，例如：$("select").change(function(){     $.get("page.html?" + serializeForm());});我错过了什么？

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

Answer 2

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

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

要么

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

立即提交表格

Answer 3

这就是最终的工作。

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