使用AJAX和jQuery提交表单。

It seems like this should be something built into jQuery without the need for more than a few lines of code, but I can't find the "simple" solution. Say, I have an HTML form:

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

When someone changes the select field, I would like to submit the form using ajax to update the database. I thought there would be some way to do the following without manually creating the values/attributes, just send them all, like:

当有人更改select字段时，我希望使用ajax提交表单以更新数据库。我认为，如果不手工创建值/属性，就可以实现以下操作，比如:

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

What am I missing?

我缺少什么?

3 个解决方案

#1

138

First give your form an id attribute, then use code like this:

首先给表单一个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 );
      }
    } );
  } );

} );

So this code uses .serialize() to pull out the relevant data from the form. It also assumes the select you care about is the first one in the form.

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

For future reference, the jQuery docs are very, very good.

为了将来的参考，jQuery文档非常非常好。

#2

There is a nice form plugin that allows you to send an HTML form asynchroniously.

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

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

或

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

to submit the form immediately

立即提交表格。

#3

This is what ended up working.

这就是结果。

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

#1

138