Отправить форму с помощью 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());
});
что я не хватает?
3 ответа:
сначала дайте вашей форме
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 docs очень, очень хорошо.
есть хороший плагин форма это позволяет отправлять HTML-форму асинхронно.
$(document).ready(function() { $('#myForm1').ajaxForm(); });
или
$("select").change(function(){ $('#myForm1').ajaxSubmit(); });
немедленно отправить форму