使用AJAX和jQuery提交表单

看来这应该是内置jQuery的东西，而不需要超过几行代码，但我找不到“简单”的解决scheme。 说，我有一个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来更新数据库。 我认为有一些方法可以做到以下几点，而不需要手动创build值/属性，只需发送它们，如：

 $("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()从表单中提取相关数据。 它也假定您关心的select是表单中的第一个。

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

Answer 2

有一个不错的表单插件 ，可以让你asynchronous地发送一个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()); });