Отправить форму с помощью 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 52
jquery serialization ajax

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 очень, очень хорошо.

139

есть хороший плагин форма это позволяет отправлять HTML-форму асинхронно.

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

или 

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

немедленно отправить форму

29

Это то, что в конечном итоге работает.

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