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

Bài viết này trả lời cách submit form mà lại không sở hữu lại trang tạo ra yên cầu lập tức mạch, đặc biệt là 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 tương tác thân client và hệ thống đa phần là dàn xếp dữ liệu

Giải pháp điều đình dữ liệu không tải lại trang làm việc đó là thực hiện AJAX nhằm thực hiện request cùng nhấn lại tài liệu bên dưới dạng một data format như thế nào đó thuận tiện cách xử trí bởi JavaScript, ví du JSON hoặc XML.

Cách sử dụng jQuery.ajax nhằm submit khung ko download lại trang

JQuery cung ứng 3 hàm chất nhận được họ thực hiện AJAX request chính là $.ajax, $.get cùng $.post, trong các số đó nhị mẫu sau là wrapper của mẫu thứ nhất 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 khung mà ko 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 tlỗi viện jQuery nhằm submit form 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 ); sự kiện.preventDefault(); // Lưu ý, nhằm ngăn tải lại trang, ta buộc phải hotline sự kiện.preventDefault() hoặc đơn giản và dễ dàng là return false trong callback của $.submit().

Ở phía trên ta thực hiện hàm $.serialize để tách bóc dữ liệu từ size thành Query String, phù hơp với ContentType mang định là application/x-www-form-urlencoded; charset=UTF-8.

Xem thêm: Cách Định Dạng Văn Bản Trong Word 2013, Ms Word 2013 Phần 3: Định Dạng Văn Bản

Nếu form của họ gửi bao gồm kết cấu dữ liệu phức tạp thì hãy tham khảo chiến thuật tạo HTML Form đựng object và array.

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

Để upload được file cùng với AJAX, ta bắt buộc sự cung cấp của đối tượng người tiêu dùng FormData. Về cơ bản đối tượng FormData có thể chấp nhận được ta gửi dữ liệu hình dạng key/value trải qua giao diện XMLHttpRequest y như khi submit().

lấy ví dụ cùng với khung như sau tất cả các ngôi trường báo cáo thông thường với kèm với cả một ngôi trường chọn lọc file. Lưu ý định dạng encoding type đến size tất cả file upload là multipart/form-data.

Phần xử trí size tất cả chút ít biến hóa sẽ là cố vày sử dụng $.serialize() thì ta thực hiện FormData như sau:

cache: false – Ngăn uống trình duyệt y không cabịt request này.contentType: false – Không cho jQuery gửi Content Type, còn nếu không sẽ làm mất chuỗi Boundary trong request.processData: false – Không đến jQuery tứ đụng cách xử lý data thành query string.

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

Chuyên mục: Domain Hosting