Hướng dẫn formdata trong javascript - formdata trong javascript

1. Bài toán đặt ra?

Nếu bạn đang phát triển những ứng dụng web kiểu SPA (single-page application) hay sử dụng PPE (practicing progressive enhancement), bạn sẽ thường phải chặn việc submit form và sử dụng ajax để xử lý dữ liệu form gửi lên. Chẳng hạn chúng ta có 2 bài toán:

Bài toán 1:

Bạn có 1 form chỉ chứa các input text, password, không có nút submit. Làm sao để submit form đó?

Bài toán 2:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

Yêu cầu thêm: cần validate form:

• Các input bắt buộc phải nhập.
• Các file input bắt buộc phải chọn, upload lên server.

Chúng ta có thể xử lý bài toán này chẳng hạn như sử dụng jquery ajax, post, hay javascript submit.... Có rất nhiều cách hay để xử lý những yêu cầu như trên.

Hôm nay mình sẽ giới thiệu một cách khác để submit form hay bất kỳ yêu cầu gửi dữ liệu lên server nào từ client bằng ajax. Đó chính là Form DataForm Data

2. FormData là cái gì vậy?

Với HTML5 chúng ta có thể sử dụng

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9, 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

// 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]);

0.

Túm váy lại, với

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9, chúng ta có thể submit dữ liệu lên server thông qua

// 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]);

0 như là đang submit form bình thường.

3. FormData có gì hay?

3.1. Khởi tạo một Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó? 9 để gửi dữ liệu.

Có nhiều cách để khởi tạo một

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9, nó tương tự việc bạn

// 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]);

5 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]);

3.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

// 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]);

6 cho phép chúng ta chèn thêm một cặp

// 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]);

7 vào trong

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9, 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.: 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: giá trị của key, có thể là USVString hoặc Blob
• filename: tên của file gửi lên server.: tên của file gửi lên server.

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

Phương thức

// 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]);

9 cho phép xóa

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

0 và

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

1 của nó ra khỏi

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9.

formData.delete(name);

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

Phương thức

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

3 trả về một

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

4 cho phép truy xuất tất cả các cặp

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

5.

// 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

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

Phương thức

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

6 trả về giá trị đầu tiên tương ứng với

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

0 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"

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

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

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

0 của

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9.

// 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"]

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

Phương thức

formData.delete(name);

0 trả về giá trị

formData.delete(name);

1 kiểm tra xem

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9 có chứa

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

0 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

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

Phương thức

formData.delete(name);

4 trả về một đối tượng

formData.delete(name);

5 chứa các cặp

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

5 trong

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9.

Ví dụ:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

0

Kết quả:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

1

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

Phương thức

formData.delete(name);

8 giúp chúng ta gán giá trị cho một

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

0 tương ứng trong

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9, nếu

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

0 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

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

0 tương ứng.

• Cú pháp:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

2

• Các thuộc tính:

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

• Ví dụ:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

3

Kết quả:

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

• Cú pháp:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

4

• Ví dụ:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

5

Kết quả:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

6

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

Phương thức

formData.delete(name);

8 giúp chúng ta gán giá trị cho một

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

0 tương ứng trong

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9, nếu

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

0 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

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

0 tương ứng.

• Cú pháp:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

7

• Các thuộc tính:

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

8

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.

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

Phương thức

// 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]); 
}

3 trả về tất cả giá trị có trong

Bạn có 1 form bao gồm các input text, password..., file input, không có nút submit. Làm sao để submit form đó?

9. Kết quả trả về là một

formData.delete(name);

5).

4. Giải quyết bài toán đưa ra?

• Vậy để 'nuốt gọn' bài toán đưa ra, chúng ta chắc sẽ xử lý dễ như ăn kẹo:
• Với bài 1:
• FormData.
• Với bài 2: