Gửi biểu mẫu bằng AJAX và jQuery

Question

Có vẻ như đây là thứ được tích hợp vào jQuery mà không cần nhiều hơn một vài dòng mã, nhưng tôi không thể tìm thấy giải pháp "đơn giản". Nói, tôi có một hình thức 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> 

Khi ai đó làm thay đổi lĩnh vực lựa chọn, tôi muốn gửi biểu mẫu sử dụng ajax để cập nhật cơ sở dữ liệu. Tôi nghĩ sẽ có một số cách để làm như sau mà không tự tạo ra các giá trị/thuộc tính, chỉ cần gửi cho họ tất cả, như:

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

tôi đang thiếu gì?

Answer 1

Đây là những gì đã kết thúc.

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

Answer 2

Có một số đẹp form plugin cho phép bạn gửi biểu mẫu HTML không đồng bộ.

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

hoặc

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

gửi biểu mẫu ngay

Answer 3

Đầu tiên cho hình thức của bạn một thuộc tính id, sau đó sử dụng mã như thế này:

$(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); 
     } 
    }); 
    }); 

}); 

Vì vậy, mã này sử dụng .serialize() để lấy ra các dữ liệu liên quan từ biểu mẫu. Nó cũng giả định lựa chọn bạn quan tâm là lựa chọn đầu tiên trong biểu mẫu.

Để tham khảo trong tương lai, jQuery docs rất, rất tốt.