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

[Tên người]

FormData là người bạn thân nhất của người dùng XHR và người dùng này đang nâng cấp lên Chrome 50. Chúng tôi sẽ thêm các phương thức cho phép bạn kiểm tra các đối tượng FormData hoặc chỉnh sửa các đối tượng đó sau khi thực tế. 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 từng sử dụng formData thì đây là một API đơn giản, được hỗ trợ tốt, cho phép bạn lập trình để tạo một biểu mẫu ảo và gửi biểu mẫu đó đến một nơi ở xa bằng window.fetch() hoặc XMLHttpRequest.send(formData).

Để tham khảo một số ví dụ, hãy đọc tiếp!

Phân tích cú pháp các biểu mẫu thực một cách chuyên nghiệp

FormData có thể được tạo từ một biểu mẫu HTML thực, ảnh chụp nhanh tất cả các giá trị hiện tại của nó. Tuy nhiên, trước đây vật thể hoàn toàn mờ đục. Bạn chỉ có thể gửi tệp đến một máy chủ, không thay đổi. Giờ đây, bạn có thể lấy, sửa đổi, nhúng, quan sát, thu nhỏ, thay đổi dữ liệu 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ũ hơn:

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

Đừng vứt bỏ formData của bạn

Nếu đang xây dựng FormData của riêng mình từ đầu, có thể bạn sẽ thấy khó chịu vì không thể sử dụng lại nó – bạn đã dành rất nhiều thời gian cho những trường đó! Vì cả hai 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});