Tìm hiểu về FormData

FormData là gì?

Với HTML5 chúng ta có thể sử dụng FormData, nó cho phép chúng ta xây dựng các đối tượng form tự động, có thể bao gồm cả các tệp tin từ hệ thống tệp tin của người dùng và sau đó gửi form này thông qua AJAX.

Tóm lại, với FormData, chúng ta có thể submit dữ liệu lên server thông qua AJAX như là đang submit form bình thường.

FormData có gì hay?

1. Khởi tạo một FormData để gửi dữ liệu.

Có nhiều cách để khởi tạo một FormData, nó tương tự việc bạn serialize dữ liệu của một form để gửi lên server:

// Không cần form: var formData = new FormData();

// Sử dụng js thuần: var formData = new FormData(document.getElementById('formID'));

// Sử dụng jquery: var formData = new FormData($('form#formID')[0]);

2. Phương thức append().

Thông thường để chèn thêm một giá trị nào đó mà không có input trên form, chúng ta thường dùng js chèn thêm input hidden. Phương thức append cho phép chúng ta chèn thêm một cặp key => value vào trong FormData, chúng ta có thể sử dụng để chèn giá trị mới cho key có sẵn hoặc chèn mới tương tự việc update giá trị cho input hay chèn thêm input hidden ở trong FormData

formData.append(name, value);
formData.append(name, value, filename);

Tham số:

name: tên của input (field) sẽ chứa giá trị chèn vào.
value: giá trị của key, có thể là USVString hoặc Blob
filename: tên của file gửi lên server.

3. Phương thức delete().

Phương thức delete cho phép xóa key và value của nó ra khỏi FormData.

formData.delete(name);

4. Phương thức entries().

Phương thức entries trả về một iterator cho phép truy xuất tất cả các cặp key/value.

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the key/value pairs
for(var pair of formData.entries()) {
   console.log(pair[0]+ ', '+ pair[1]); 
}

Và kết quả nhận được sẽ là:

key1, value1
key2, value2

5. Phương thức get().

Phương thức get trả về giá trị đầu tiên tương ứng với key truyền vào.

// init form data: var formData = new FormData();

// append data

formData.append('username', 'Chris');
formData.append('username', 'Bob');

// get data formData.get('username'); // Returns "Chris"

6. Phương thức getAll().

Phương thức này trả về tất cả giá trị tương ứng với key của FormData.

// init form data
var formData = new FormData();

// append data

formData.append('username', 'Chris');
formData.append('username', 'Bob');

// get first username
formData.get('username'); // Returns "Chris"

// get all username
formData.getAll('username'); // Returns ["Chris", "Bob"]

7. Phương thức has().

Phương thức has trả về giá trị boolean kiểm tra xem FormData có chứa key truyền vào hay không.

// init form data
var formData = new FormData();

// Check form data has key
formData.has('username'); // Returns false
formData.append('username', 'Chris');
formData.has('username'); // Returns true

8. Phương thức keys().

Phương thức keys trả về một đối tượng Iterator chứa các cặp key/value trong FormData.

Ví dụ:

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the keys
for (var key of formData.keys()) {
   console.log(key); 
}

Kết quả:

key1
key2

9. Phương thức set().

Phương thức set giúp chúng ta gán giá trị cho một key tương ứng trong FormData, nếu key không tồn tại sẽ tạo mới, ngược lại sẽ ghi đè tất cả giá trị cũ bằng giá trị mới của key tương ứng.

Cú pháp:

formData.set(name, value);
formData.set(name, value, filename);

Các thuộc tính:

• name: tên của trường chúng ta cần gán giá trị (key).
• value: giá trị cần gán.
• filename: tên của file nếu cần.

Ví dụ:

// Init form data
var formData = new FormData();
formData.append('username', 'Chris');   // add new

formData.set('username', 'Bob');   // overwrite
formData.set('userpic', myFileInput.files[0], 'chris.jpg');     // add new

10. Phương thức values().

Phương thức values trả về tất cả giá trị có trong FormData. Kết quả trả về là một Iterator

Cú pháp:

formData.values();

Ví dụ:

// Create a test FormData object
var formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

// Display the values
for (var value of formData.values()) {
   console.log(value); 
}

Kết quả:

value1
value2

Kết luận.

Javascript ngày càng phát triển mạnh mẽ, mọi thứ sẽ giúp chúng ta xử lý mọi thao tác theo một cách dễ dàng, tối ưu và nhanh nhất. Hãy thử và cho mình thêm nhiều cách giải hay nữa nhé các bạn. Cảm ơn các bạn đã đọc