Tạo biểu mẫu tùy chỉnh bằng API dữ liệu biểu mẫu JavaScript

---

Việc tạo biểu mẫu dễ dàng thực hiện miễn là bạn không có trường hợp cạnh. Sau đó, mỡ thịt xông khói đi xuống cống và đường ống của bạn bị phá hủy. Vì vậy, đôi khi bạn cần một số công cụ bổ sung trong bộ công cụ của bạn để đối phó với nó. FormData API có thể là một trong những công cụ của bạn.

API dữ liệu biểu mẫu cốt lõi

FormData có rất nhiều tính năng nhưng phương pháp duy nhất hoạt động trên tất cả các trình duyệt là append . Giả sử ta muốn tạo một ứng dụng xã hội để mọi người chia sẻ hình ảnh thịt xông khói của họ. Tại đây, ta sẽ tạo một biểu mẫu cho phép user gửi ảnh có tiêu đề và tên tác giả. Đánh dấu HTML của ta sẽ giống như sau:

<input type="text" name="author"  id="author-input" /> <input type="text" name="title" id="title-input" /> <input type="file" name="picture" id="picture-input" /> <button id="submit-button">SUBMIT</button> 

Để xử lý dữ liệu của ta , ta có thể tạo mã sau:

const inputs = document.getElementsByTagName('input'); // This object will keep track of the changes of inputs const applicationState = {   title: "",   author: "",   picture: "" }  document.getElementById('submit-button').onclick = async () => {   // We create a new form object   const form = new FormData();   // we append each element to the form   form.append('title', applicationState.title);   form.append('author', applicationState.author);   form.append('picture', applicationState.picture);    const res = await fetch('https://postman-echo.com/post', {     method: 'POST',     mode: 'no-cors',     body: form   });   // ... Do something with the response }  // The rest of this code is functional // It is not directly related to FormData  // This for loop reflects input changes to the application's state for (let i = 0; i < inputs.length; i++) {   const input = inputs[i]   const inputName = input.name    input.onchange = (e) => {     let value = e.target.value     // updating the application state according to the input the user interacted with     if (inputName === 'picture' && e.target.files[0]) {       setPicture(e.target.files[0]);     } else {       applicationState[inputName] = value;     }   }; } // setPicture takes a file reads it as a base64URL and assigns that value to application.picture const setPicture = (file) => {   const fr = new FileReader();   // Reading the data and encoding it as base64 to send it to the server   fr.readAsDataURL(file);   // When the data is done loading we assign it to picture   fr.onloadend = (fileData) => {     applicationState.picture = fileData.target.result;   } } 

Nếu đây là đầu vào của ta :

Sau đó, ta nhấn nút gửi, ta sẽ gần như nhận được các tiêu đề yêu cầu sau:

{   "Accept-Encoding": "gzip, deflate, br",   "Connection": "keep-alive",   "Content-Length": "4369",   "Content-Type": "multipart/form-data",   "Host": "postman-echo.com",   "Origin": "null",   "Sec-Fetch-Mode": "no-cors",   "Sec-Fetch-Site": "cross-site" }  

Và phần thân sau:

{   "title": "Alligator Bacon",   "author": "Jack Misteli",   "picture": "data:text/javascript;base64,iVBORw0KGgoAA......." } 

Xin lưu ý FormData tạo FormData có thể lấy dữ liệu biểu mẫu làm đối số. Vì vậy, bạn có thể làm:

<form id="user-form">   <input type="text" name="username">   <input type="password" name="password">   <input type="file" name="picture" id="picture-input"/>   <input type="submit"> </form> <script>   document.getElementById('user-form').onsubmit = async function (e) {     e.preventDefault();     // here `this` is the user-form HTML element     const form = new FormData(this);     ///... send form to server   } </script> 

Một vấn đề quan trọng khác, là append không overrides lên khóa nếu nó đã tồn tại.

const form = new FormData(); form.append('baconType', 'pork'); form.append('baconType', 'vegan'); // When you send your form it will look like this: // { //  baconType: pork //  baconType: vegan //} 

Nếu bạn muốn overrides một giá trị khóa, bạn sẽ phải sử dụng các chức năng khác.

Biểu mẫu nâng cao

Phương FormData khởi tạo FormData và phương thức append có sẵn trong tất cả các trình duyệt. Hầu hết các phương pháp khác đều khá tự mô tả:

• FormData.has(key) : Kiểm tra xem khóa có tồn tại trong biểu mẫu hay không.
• FormData.set(key, value) : Thay đổi giá trị được liên kết với khóa.
• FormData.delete(key) : Xóa mục nhập được liên kết với khóa.
• FormData.get(key) : Truy cập giá trị đầu tiên được liên kết với khóa.
• FormData.getAll(key) : Tạo một mảng gồm tất cả các giá trị được liên kết với một khóa.
• FormData.keys() , FormData.values() , FormData.entries() : Các trình lặp được sử dụng để lấy tất cả các khóa, các giá trị liên quan hoặc chỉ các mục nhập của FormData.

🥓 Vậy là xong nếu bạn có câu hỏi nào, bạn có thể đưa chúng lên Twitter với một liên kết đến bài viết và tôi sẽ cố gắng hết sức để trả lời chúng!

---

---

Các tin liên quan

Thuật toán sắp xếp cho người mới bắt đầu trong JavaScript: Bubble, Selection & Insertion Sort
2020-02-03
Tìm kiếm nhị phân tuyến tính Vs qua JavaScript
2020-01-29
Hiểu Đệ quy & Ghi nhớ qua JavaScript
2020-01-26
Đọc và xử lý tệp với API JavaScript FileReader
2020-01-23
Tìm hiểu ký hiệu Big O qua JavaScript
2020-01-20
Cách sử dụng API BroadcastChannel trong JavaScript
2020-01-13
Đa năng hóa chuỗi trong JavaScript bằng Simplur
2020-01-10
Hướng dẫn nhanh về phương pháp đối sánh chuỗi trong JavaScript
2020-01-07
Tham quan API quyền JavaScript
2020-01-05
V8 của V8: Chuỗi liên kết tùy chọn và kết hợp Nullish trong JavaScript
2019-12-29