Các phương thức formData để kiểm tra và sửa đổi

Sam Thorogood

FormData là người bạn thân nhất của người dùng XHR và sẽ được nâng cấp trong Chrome 50. Chúng tôi sẽ thêm các phương thức cho phép bạn kiểm tra đối tượng FormData hoặc sửa đổi các đối tượng đó sau khi thực hiện. Giờ đây, bạn có thể sử dụng get(), delete() và các trình trợ giúp lặp lại như entries, keys, v.v. (Xem danh sách đầy đủ.)

Nếu bạn chưa sử dụng FormData, thì đây là một API đơn giản, được hỗ trợ tốt, cho phép bạn tạo một biểu mẫu ảo theo phương thức lập trình và gửi biểu mẫu đó đến một nơi xa bằng window.fetch() hoặc XMLHttpRequest.send(formData).

Hãy đọc tiếp để xem một số ví dụ!

Phân tích cú pháp các biểu mẫu thực tế như một chuyên gia

Bạn có thể tạo FormData từ một biểu mẫu HTML thực, chụp nhanh tất cả các giá trị hiện tại của biểu mẫu đó. Tuy nhiên, đối tượng này từng hoàn toàn mờ đục. Tất cả những gì bạn có thể làm là gửi tiếp gói dữ liệu đó đến máy chủ mà không thay đổi gì. Bây giờ, bạn có thể lấy, sửa đổi, bop, quan sát, thu nhỏ, thay đổi và cuối cùng là tải lên:

function sendRequest(theFormElement) {
    var formData = new FormData(theFormElement);
    formData.delete("secret_user_data"); // don't include this one!
    if (formData.has("include_favorite_color")) {
    formData.set("color", userPrefs.getColor());
    }
    // log all values like <input name="widget">
    console.info("User selected widgets", formData.getAll("widget"));

    window.fetch(url, {method: 'POST', body: formData});
}

Bạn cũng có thể gửi FormData qua XMLHttpRequest cũ:

var x = new XMLHttpRequest();
x.open('POST', url);
x.send(formData);

Đừng vứt FormData

Nếu đang tạo FormData từ đầu, bạn có thể thấy khó chịu vì không thể sử dụng lại FormData đó – bạn đã dành rất nhiều thời gian cho các trường đó! Vì cả phương thức window.fetch() và XMLHttpRequest.send() đều chụp nhanh FormData, nên giờ đây, bạn có thể sử dụng lại và sửa đổi công việc của mình một cách an toàn! Hãy xem ví dụ sau:

// append allows multiple values for the same key
var formData = new FormData();
formData.append("article", "id-123");
formData.append("article", "id-42");

// send like request
formData.set("action", "like");
window.fetch(url, {method: 'POST', body: formData});

// send reshare request
formData.set("action", "reshare");  // overrides previous "action"
window.fetch(url, {method: 'POST', body: formData});