Form submit không cần load lại trình duyệt

      455

Bài viết này hướng dẫn cách submit khung cơ mà không mua lại trang tạo thành đề xuất lập tức mạch, nhất là cùng với các Web App.

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

Quý Khách sẽ xem: Form submit ko bắt buộc load lại trình duyệt


*

Single Page Application – Mọi thúc đẩy giữa client cùng VPS chủ yếu là dàn xếp dữ liệu

Giải pháp hiệp thương tài liệu ko tải lại trang sinh hoạt đó là thực hiện AJAX nhằm tiến hành request cùng nhận lại dữ liệu bên dưới dạng một data format làm sao kia tiện lợi cách xử trí bằng JavaScript, ví du JSON hoặc XML.

Cách dùng jQuery.ajax nhằm submit size không mua lại trang

JQuery cung ứng 3 hàm có thể chấp nhận được bọn họ thực hiện AJAX request sẽ là $.ajax, $.get với $.post, trong các số đó nhị mẫu sau là wrapper của loại trước tiên giành cho GET cùng POST method.

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

Đoạn mã JavaScript sau áp dụng $.ajax của thỏng 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 settings goes here // .. ).done(function(response) // Process the response here ); event.preventDefault(); // Lưu ý, nhằm ngăn download lại trang, ta bắt buộc Điện thoại tư vấn sự kiện.preventDefault() hoặc dễ dàng là return false trong callbachồng của $.submit().

Xem thêm: Sửa Lỗi Bảo Mật Google Chrome, Cách Sửa Lỗi Ssl Trên Trình Duyệt Chrome

Nếu khung của bọn họ gửi tất cả cấu trúc tài liệu tinh vi thì hãy tham khảo phương án sản xuất HTML Form cất object cùng array.

Upload file cùng với jQuery.ajax cùng FormData

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

lấy một ví dụ với form nlỗi sau gồm các ngôi trường công bố thường thì với kèm đối với cả một trường tuyển lựa tệp tin. Lưu ý định hình encoding type đến form có tệp tin upload là multipart/form-data.

Phần cách xử trí form có chút biến đổi sẽ là vắt vì cần sử dụng $.serialize() thì ta áp dụng FormData nlỗi sau:

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