Sử dụng ajax để không load lại trang

     

Bài viết này khuyên bảo phương pháp submit form mà không tải lại trang tạo ra thử dùng tức khắc mạch, đặc biệt là với các Web App.

Bạn đang xem: Sử dụng ajax để không load lại trang


*
Single Page Application – Mọi xúc tiến thân client và VPS chủ yếu là đàm phán dữ liệu

Giải pháp hiệp thương tài liệu ko thiết lập lại trang sinh hoạt đấy là áp dụng AJAX để triển khai request và dấn lại dữ liệu bên dưới dạng một data format như thế nào đó dễ ợt cách xử trí bằng JavaScript, ví du JSON hoặc XML.

Cách cần sử dụng jQuery.ajax nhằm submit form không mua lại trang

JQuery hỗ trợ 3 hàm được cho phép bọn họ tiến hành AJAX request đó là $.ajax, $.get và $.post, trong đó hai chiếc sau là wrapper của cái trước tiên dành riêng cho GET cùng POST method.

Dưới đấy là một ví dụ thực hiện $.ajax() nhằm submit form nhưng mà ko nên reload. Giả sử ta gồm một khung như sau:

Đoạn mã JavaScript sau thực hiện $.ajax của tlỗi viện jQuery nhằm 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 web1_settings goes here // .. ).done(function(response) // Process the response here ); sự kiện.preventDefault(); // Lưu ý, nhằm ngnạp năng lượng download lại trang, ta đề nghị Hotline sự kiện.preventDefault() hoặc dễ dàng và đơn giản là return false vào callbachồng của $.submit().

Ở phía trên ta thực hiện hàm $.serialize để tách dữ 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: Chia Sẻ Code Ẩn Hiện Nội Dung Html, Code Ẩn Hiện, Cái Này Hiện Thì Cái Kia Ẩn

Nếu form của họ gửi gồm cấu trúc dữ liệu tinh vi thì hãy tham khảo giải pháp sản xuất HTML Form đựng object cùng array.

Upload file với jQuery.ajax và FormData

Để upload được file cùng với AJAX, ta đề xuất sự cung cấp của đối tượng người sử dụng FormData. Về cơ bạn dạng đối tượng người dùng FormData được cho phép ta gửi tài liệu thứ hạng key/value trải qua hình ảnh XMLHttpRequest giống hệt như lúc submit().

lấy ví dụ với form như sau tất cả những trường đọc tin thông thường và kèm đối với tất cả một trường tuyển lựa tệp tin. Lưu ý định dạng encoding type đến size bao gồm file upload là multipart/form-data.

Phần xử trí form có chút biến hóa đó là ráng vày dùng $.serialize() thì ta sử dụng FormData như sau:

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

P/S: Hàm cách xử trí bên trên gồm bonus thêm một trong những phần cách xử lý upload progress là progressHandler. Hãy thay đổi nội dung theo ý của bạn.