Submit html form không tải lại trang với ajax

Bài viết này hướng dẫn bí quyết submit khung cơ mà không tải lại trang tạo ra trải nghiệm liền mạch, đặc biệt là với các Web App.

You watching: Submit html form không tải lại trang với ajax


*
Single Page Application – Mọi tương tác giữa client và hệ thống chủ yếu là trao đổi dữ liệu

Giải pháp trao đổi dữ liệu không tải lại trang ở đây là sử dụng AJAX để thực hiện request cùng nhận lại dữ liệu dưới dạng một data format nào đó dễ dàng xử lý bằng JavaScript, ví du JSON hoặc XML.

Cách dùng jQuery.ajax để submit size ko tải lại trang

JQuery cung cấp 3 hàm có thể chấp nhận được chúng ta thực hiện AJAX request đó là $.ajax, $.get và $.post, vào đó nhì loại sau là wrapper của mẫu đầu tiên giành cho GET cùng POST method.

Dưới đây là một ví dụ sử dụng $.ajax() để submit form nhưng mà không cần reload. Giả sử ta tất cả một size như sau:

Đoạn mã JavaScript sau sử dụng $.ajax của thư 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 ); sự kiện.preventDefault(); // Lưu ý, để ngăn tải lại trang, ta phải gọi sự kiện.preventDefault() hoặc đơn giản là return false trong callback của $.submit().

Ở đây ta sử dụng hàm $.serialize để tách dữ liệu từ form thành Query String, phù hơp với ContentType mặc định là application/x-www-form-urlencoded; charset=UTF-8.

See more: Cài Đặt Font Chữ Cho Điện Thoại Android, Hướng Dẫn Cài Thêm Font Chữ Trên Android 10

Nếu khung của họ gửi gồm cấu trúc dữ liệu phức tạp thì hãy tham khảo giải pháp tạo HTML Form chứa object cùng array.

Upload file với jQuery.ajax và FormData

Để upload được tệp tin với AJAX, ta cần sự hỗ trợ của đối tượng FormData. Về cơ bản đối tượng FormData được cho phép ta gửi dữ liệu kiểu key/value thông qua giao diện XMLHttpRequest giống như Lúc submit().

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

Phần xử lý size gồm chút núm đổi đó là thế vày sử dụng $.serialize() thì ta sử dụng FormData như sau:

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

See more: Phương Pháp Học Nhanh Nhớ Lâu : 14 Bước, Học Nhanh Nhớ Lâu

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