Tìm hiểu về formdata, submit html form không tải lại trang với ajax

Bài viết này hướng dẫn giải pháp submit form 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 những Web App.

Bạn đang xem: Tìm hiểu về formdata, 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à server chủ yếu là trao đổi dữ liệu

Giải pháp trao đổi dữ liệu ko 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 cần sử dụng jQuery.ajax để submit khung không tải lại trang

JQuery cung cấp 3 hàm mang lại phép chúng ta thực hiện AJAX request đó là $.ajax, $.get với $.post, trong đó hai chiếc sau là wrapper của cái đầu tiên giành riêng cho GET cùng POST method.

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

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

Ở đây ta sử dụng hàm $.serialize để bóc 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.

Xem thêm: Php : Công Ty Cổ Phần Cảng Hải Phòng, Công Ty Cổ Phần Cảng Hải Phòng

Nếu size của bọn họ gửi gồm cấu trúc dữ liệu phức tạp thì nên tham khảo giải pháp tạo HTML khung chứa object với array.

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

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

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

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

cache: false – Ngăn trình duyệt không cache request này.contentType: false – quán triệt jQuery gửi nội dung Type, nếu không sẽ làm mất chuỗi Boundary vào request.processData: false – không cho jQuery tư động xử lý data thành query string.

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