FORM SUBMIT KHÔNG CẦN LOAD LẠI TRÌNH DUYỆT

  -  

Bài viết này lí giải biện pháp submit size nhưng ko tải lại trang tạo nên đòi hỏi tức thì mạch, nhất là cùng với những Web App.

Bạn đang xem: Form submit không cần load lại trình duyệt


*
Single Page Application – Mọi cửa hàng giữa client và VPS hầu hết là đàm phán dữ liệu

Giải pháp dàn xếp dữ liệu không cài đặt lại trang ở đấy là sử dụng AJAX nhằm triển khai request cùng thừa nhận lại tài liệu dưới dạng một data format làm sao kia thuận lợi xử trí bởi JavaScript, ví du JSON hoặc XML.

Cách dùng jQuery.ajax để submit khung không tải lại trang

JQuery cung cấp 3 hàm cho phép bọn họ thực hiện AJAX request sẽ là $.ajax, $.get và $.post, trong số đó hai chiếc sau là wrapper của loại thứ nhất dành riêng cho GET với POST method.

Dưới đấy là một ví dụ thực hiện $.ajax() để submit form nhưng không buộc phải reload. Giả sử ta bao gồm một size nlỗi sau:

Đoạn mã JavaScript sau sử dụng $.ajax của thỏng viện jQuery để submit khung này.

$(document).ready(function() { $("form").submit(function(event) { $.ajax( method: $(this).attr("method"), url: $(this).attr("action"), data: $(this).serialize(), // other AJAX settings goes here // .. ).done(function(response) // Process the response here ); event.preventDefault(); // Lưu ý, nhằm ngăn cài đặt lại trang, ta đề xuất gọi event.preventDefault() hoặc đơn giản là return false vào callbaông chồng của $.submit().

Ở trên đây ta thực hiện hàm $.serialize để bóc tài liệu trường đoản cú khung thành Query String, phù hơp với ContentType khoác định là application/x-www-form-urlencoded; charset=UTF-8.

Xem thêm:

Nếu khung của chúng ta gửi gồm cấu tạo tài liệu phức hợp thì hãy tham khảo phương án tạo nên HTML Form đựng object cùng array.

Upload tệp tin với jQuery.ajax cùng FormData

Để upload được tệp tin cùng với AJAX, ta phải sự hỗ trợ của đối tượng người tiêu dùng FormData. Về cơ bản đối tượng FormData cho phép ta gửi tài liệu hình trạng key/value trải qua đồ họa XMLHttpRequest y hệt như lúc submit().

Ví dụ cùng với form như sau tất cả các ngôi trường công bố thường thì cùng kèm đối với tất cả một trường sàng lọc file. Lưu ý định dạng encoding type mang đến khung có tệp tin upload là multipart/form-data.

Phần giải pháp xử lý size có chút biến hóa đó là cụ vày sử dụng $.serialize() thì ta sử dụng FormData như sau:

cache: false – Ngăn trình cẩn thận không cabít request này.contentType: false – Không mang lại jQuery gửi Content Type, còn nếu như không vẫn làm mất chuỗi Boundary vào request.processData: false – Không đến jQuery tứ động cách xử lý data thành query string.

Xem thêm: Cách Tạo Phân Số Trong Word 2010, Cách Đánh Phân Số Trong Word

P/S: Hàm cách xử trí bên trên gồm bonus thêm 1 phần cách xử lý upload progress là progressHandler. Hãy đổi khác ngôn từ theo ý của doanh nghiệp.