Trong bài viết trước của tôi, chúng ta đã xem xét cách tạo một yêu cầu HTTP POST bằng cách sử dụng XMLHttpRequest [XHR] trong vanilla JavaScript. Vì cách sử dụng phổ biến nhất của XHR là để gửi yêu cầu không đồng bộ với tải trọng JSON, nên bạn nên biết cách thực hiện
JSON là viết tắt của JavaScript Object Notation và là định dạng phổ biến để chia sẻ dữ liệu với máy chủ và hiển thị kết quả cho máy khách
Ví dụ sau đây cho thấy cách bạn có thể sử dụng XHR để thực hiện yêu cầu POST JSON trong JavaScript
const xhr = new XMLHttpRequest[]
// listen for `load` event
xhr.onload = [] => {
// print JSON response
if [xhr.status >= 200 && xhr.status Email
Submit
Để xử lý các lần gửi trong JavaScript, chúng tôi có thể sử dụng API FormData như thế này
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Nếu chúng tôi chạy mã này và gửi biểu mẫu, giá trị chúng tôi nhập vào đầu vào email sẽ được ghi lại. Tôi không biết bạn thế nào, nhưng lần đầu tiên tôi thử điều này, tôi đã khóc vì hạnh phúc — điều này đơn giản hơn nhiều so với những gì tôi đã từng làm. [Cách tiếp cận phức tạp hơn trước đây của tôi vẫn ở cuối bài viết này nếu bạn muốn so sánh. ]
Cách lấy tất cả các giá trị từ biểu mẫu dưới dạng đối tượng JSON bằng API FormData
Nếu chúng tôi muốn nhận tất cả các giá trị từ một biểu mẫu, thì có thêm một bước. Hãy mở rộng biểu mẫu của chúng tôi với một trường tên
+ Name
+
+
Email
Submit
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];API FormData không trực tiếp chuyển đổi các giá trị biểu mẫu thành JSON, nhưng chúng ta có thể chuyển đổi ở đó bằng cách sử dụng phương thức
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit]; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Điều này tương thích với
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Nhận các giá trị đa lựa chọn như hộp kiểm dưới dạng JSON với API FormData
Cách tiếp cận
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];May mắn thay, giải pháp cho vấn đề này chỉ yêu cầu thêm một dòng JavaScript cho mỗi đầu vào đa giá trị
Hãy thêm một trường có nhiều giá trị tiềm năng vào biểu mẫu của chúng ta
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Bây giờ đối tượng chứa một mảng trong
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Một ví dụ đầy đủ về nhiều loại đầu vào với API FormData
Để biết ví dụ đầy đủ về cách sử dụng API FormData với nhiều loại đầu vào khác nhau, hãy xem CodePen này [các giá trị biểu mẫu được in bên dưới biểu mẫu khi gửi]
xem trên CodePen
Đứng lên. Phiên bản gốc của bài viết này đã sử dụng cách tiếp cận thủ công hơn để nhận các giá trị biểu mẫu. API FormData khiến điều này phần lớn trở nên lỗi thời, nhưng tôi đã đưa vào bài viết gốc bên dưới để bạn có thể thấy phương pháp này đã phát triển như thế nào
Nội dung bài báo gốc
Việc sử dụng AJAX thực sự phổ biến, nhưng vẫn rất khó để lấy các giá trị ra khỏi biểu mẫu mà không sử dụng thư viện
Và đó là bởi vì có vẻ khá đáng sợ khi thiết lập tất cả các vòng lặp và kiểm tra cần thiết để xử lý việc phân tích một biểu mẫu và tất cả các phần tử con của nó. Bạn tham gia vào các cuộc thảo luận gay gắt về việc liệu bạn nên sử dụng
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Nhưng đối với các trang web đơn giản không cần nhiều ngoài việc lấy dữ liệu biểu mẫu làm đối tượng để sử dụng với JSON, jQuery [hoặc bất kỳ thư viện hoặc khung lớn nào] bao gồm rất nhiều chi phí cho chỉ một hoặc hai chức năng mà bạn sẽ sử dụng
[Ngay cả khi đó không phải là thứ chúng tôi từng sử dụng trong quá trình sản xuất, viết các tập lệnh tiện ích của riêng chúng tôi là một cách tuyệt vời để nâng cao hiểu biết của chúng tôi về cách mọi thứ hoạt động. Nếu chúng ta phụ thuộc quá nhiều vào “phép thuật” của một công cụ để làm cho các ứng dụng của chúng ta hoạt động, thì việc gỡ lỗi chúng sẽ trở nên thực sự khó khăn khi chúng ta tìm thấy sự cố nằm ngoài phạm vi của công cụ. ]
Vì vậy, trong hướng dẫn này, chúng ta sẽ viết tập lệnh của riêng mình — bằng JavaScript đơn giản — để kéo các giá trị của các trường của biểu mẫu vào một đối tượng, sau đó chúng ta có thể sử dụng đối tượng này cho AJAX, cập nhật thông tin trên các phần khác của trang và bất kỳ thứ gì khác
Những gì chúng ta sẽ xây dựng
Vào cuối hướng dẫn này, chúng tôi sẽ tạo biểu mẫu được hiển thị trong bút này
Nếu bạn điền vào biểu mẫu và nhấn nút “Gửi. ”, dữ liệu biểu mẫu sẽ được xuất dưới dạng JSON trong phần “Dữ liệu biểu mẫu” bên dưới
GHI CHÚ. Để cho thấy rằng đầu vào
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Trước khi chúng ta bắt đầu. Mục tiêu và Kế hoạch
Để đỡ phải đau đầu và đau tim, chúng ta sẽ bắt đầu dự án của mình với một kế hoạch rõ ràng. Điều này sẽ giữ cho các mục tiêu của chúng ta rõ ràng và giúp xác định cấu trúc cũng như mục đích của mã trước khi chúng ta viết một dòng.
Bắt đầu với một mục tiêu. chúng ta nên kết thúc với cái gì?
Trước khi chúng tôi viết bất kỳ JavaScript nào, hãy bắt đầu bằng cách quyết định xem chúng tôi muốn đầu ra trông như thế nào
Nếu tôi đã điền đầy đủ vào biểu mẫu trên, chúng tôi muốn đối tượng kết quả trông như thế này
{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}Thuộc tính
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Điều này là lý tưởng, bởi vì nó có nghĩa là chúng ta có thể làm điều gì đó như thế này
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Điều này đơn giản, dễ đọc đối với con người và cũng dễ dàng gửi tới các API chấp nhận dữ liệu
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Vì vậy, hãy cố gắng vì điều đó
Lên kế hoạch. làm cách nào chúng tôi có thể chuyển đổi các trường biểu mẫu thành JSON?
Khi chúng tôi hoàn thành, JavaScript của chúng tôi sẽ hoàn thành các mục tiêu sau
- Nắm bắt sự kiện
0 của biểu mẫu và ngăn việc gửi mặc địnhfunction handleSubmit[event] { event.preventDefault[]; const data = new FormData[event.target]; const value = Object.fromEntries[data.entries[]]; + + value.topics = data.getAll["topics"]; console.log[{ value }]; } const form = document.querySelector["form"]; form.addEventListener["submit", handleSubmit]; - Chuyển đổi các phần tử con của biểu mẫu thành JSON
- Kiểm tra để đảm bảo chỉ các phần tử trường biểu mẫu được thêm vào đối tượng
- Thêm biện pháp bảo vệ để chỉ lưu trữ các trường có thể kiểm tra nếu thuộc tính
1 được đặtfunction handleSubmit[event] { event.preventDefault[]; const data = new FormData[event.target]; const value = Object.fromEntries[data.entries[]]; + + value.topics = data.getAll["topics"]; console.log[{ value }]; } const form = document.querySelector["form"]; form.addEventListener["submit", handleSubmit]; - Xử lý đầu vào cho phép nhiều giá trị, như hộp kiểm
Sẵn sàng để uốn cong bộ não lớn của bạn?
Bắt đầu. Tạo một biểu mẫu để kiểm tra
Để tránh rắc rối khi thiết lập công cụ giao diện người dùng [chúng tôi đang sử dụng Babel để chuyển mã các tính năng mới hơn của JavaScript, chẳng hạn như ], chúng tôi sẽ thực hiện dự án này trên Codepen
Để bắt đầu, hãy tạo một nhánh của cây bút này, chứa đánh dấu biểu mẫu với các đầu vào phổ biến và một số kiểu để làm cho nó hiển thị đẹp mắt
GHI CHÚ. Phần đánh dấu được viết bằng Jade [gần đây đã được đổi tên thành Pug] vì tôi thấy nó nhanh hơn và dễ đọc hơn. Nếu bạn thích xem HTML đơn giản, bạn có thể nhấn vào nút “xem đã biên dịch” ở dưới cùng bên phải của ngăn Ngọc trong bút ở trên
GHI CHÚ. Các kiểu cho biểu mẫu sử dụng các quy ước đặt tên kiểu BEM và tôi đang sử dụng PostCSS để giúp dễ dàng nhóm các kiểu của mình lại với nhau mà không thực sự tạo CSS lồng nhau. Đối với tôi, cách này dễ đọc hơn nhiều so với các cách viết CSS khác, nhưng nếu bạn thích CSS thông thường hơn, hãy nhấp vào nút “xem đã biên dịch” ở dưới cùng bên phải của ngăn PostCSS trong bút ở trên
Bước 1. Thêm một Người nghe vào Sự kiện function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];
0 cho Biểu mẫu
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Trước khi chúng tôi làm bất cứ điều gì khác, chúng tôi cần lắng nghe sự kiện
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Để làm điều này, hãy tạo một hàm có tên là
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit]; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit]; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Tạo một hàm function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];
4
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Hiện tại, chức năng này sẽ không làm được gì nhiều. Để bắt đầu, chúng ta sẽ ngăn chặn hành động mặc định
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit]; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit]; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Để ngăn hành động mặc định, hàm này cần chấp nhận một đối số.
{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
const handleFormSubmit = [event] => {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault[];
// TODO: Call our function to get the form data.
const data = {};
// Demo only: print the form data onscreen as a formatted JSON object.
const dataContainer = document.getElementsByClassName['results__display'][0];
// Use `JSON.stringify[]` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify[data, null, ' '];
// ...this is where we’d actually do something with the form data...
};GHI CHÚ. Biến
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}Đính kèm một trình lắng nghe sự kiện vào biểu mẫu
Với trình xử lý sự kiện được tạo, chúng tôi cần thêm một trình xử lý vào biểu mẫu để chúng tôi thực sự có thể xử lý sự kiện
Để làm điều này, chúng tôi sử dụng
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}Tiếp theo, sử dụng
{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];Tại thời điểm này, chúng tôi có thể kiểm tra xem mọi thứ có hoạt động bình thường không bằng cách nhấp vào nút “Gửi. nút ” trên biểu mẫu. Chúng ta sẽ thấy
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Bước 2. Trích xuất các giá trị của các trường biểu mẫu dưới dạng JSON
Tiếp theo, chúng ta cần thực sự lấy các giá trị từ các trường biểu mẫu
Để làm điều này, chúng tôi sẽ sử dụng thứ gì đó - lúc đầu - có thể trông đáng sợ như cứt.
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Chúng ta sẽ đi sâu vào những chi tiết bẩn thỉu về những gì
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Tôi biết. Tôi biết. Nó trông có lông. Nhưng hãy đào sâu và xem điều này đang làm gì
Đầu tiên, hãy chia cái này thành các bộ phận cấu thành của nó
- Chúng tôi có một chức năng được gọi là
4, chấp nhận một đối số.// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email];
6{ "salutation": "Mr.", "name": "Jason Lengstorf", "email": "jason@lengstorf.com", "subject": "I have a general question.", "message": "Is this thing on?", "snacks": ["pizza"], "secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7" } - Bên trong hàm đó, chúng tôi trả về giá trị của
6, chấp nhận ba đối số. một biểu mẫu, một chức năng và một đối tượng trống theo nghĩa đen [_______21_______0]// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email]; - Đối số hàm chấp nhận các đối số
9 vàfunction handleSubmit[event] { event.preventDefault[]; const data = new FormData[event.target]; const value = Object.fromEntries[data.entries[]]; + + value.topics = data.getAll["topics"]; console.log[{ value }]; } const form = document.querySelector["form"]; form.addEventListener["submit", handleSubmit];
9, đồng thời thêm thuộc tính mới có khóa là// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email];
0 và giá trị/** * A handler function to prevent default submission and run our custom script. * @param {Event} event the submit event triggered by the user * @return {void} */ const handleFormSubmit = [event] => { // Stop the form from submitting since we’re handling that with AJAX. event.preventDefault[]; // TODO: Call our function to get the form data. const data = {}; // Demo only: print the form data onscreen as a formatted JSON object. const dataContainer = document.getElementsByClassName['results__display'][0]; // Use `JSON.stringify[]` to make the output valid, human-readable JSON. dataContainer.textContent = JSON.stringify[data, null, ' ']; // ...this is where we’d actually do something with the form data... };
1, cuối cùng trả về đối tượng/** * A handler function to prevent default submission and run our custom script. * @param {Event} event the submit event triggered by the user * @return {void} */ const handleFormSubmit = [event] => { // Stop the form from submitting since we’re handling that with AJAX. event.preventDefault[]; // TODO: Call our function to get the form data. const data = {}; // Demo only: print the form data onscreen as a formatted JSON object. const dataContainer = document.getElementsByClassName['results__display'][0]; // Use `JSON.stringify[]` to make the output valid, human-readable JSON. dataContainer.textContent = JSON.stringify[data, null, ' ']; // ...this is where we’d actually do something with the form data... };
9function handleSubmit[event] { event.preventDefault[]; const data = new FormData[event.target]; const value = Object.fromEntries[data.entries[]]; + + value.topics = data.getAll["topics"]; console.log[{ value }]; } const form = document.querySelector["form"]; form.addEventListener["submit", handleSubmit];
Sau khi chúng tôi đã thêm mã đó vào bút của mình, chúng tôi cần gọi hàm từ
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
const handleFormSubmit = [event] => {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault[];
// TODO: Call our function to get the form data.
const data = {};
// Demo only: print the form data onscreen as a formatted JSON object.
const dataContainer = document.getElementsByClassName['results__display'][0];
// Use `JSON.stringify[]` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify[data, null, ' '];
// ...this is where we’d actually do something with the form data...
};/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
const handleFormSubmit = [event] => {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault[];
// TODO: Call our function to get the form data.
const data = {};
// Demo only: print the form data onscreen as a formatted JSON object.
const dataContainer = document.getElementsByClassName['results__display'][0];
// Use `JSON.stringify[]` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify[data, null, ' '];
// ...this is where we’d actually do something with the form data...
};Bây giờ chúng ta có thể chạy nó bằng cách nhấp vào nút “Send It. nút ” bây giờ sẽ xuất ra cái này
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Có một số vấn đề ở đây — ví dụ: cả “Ms. ” cũng không phải “Cake” đã thực sự được chọn trên biểu mẫu và có một mục trống ở dưới cùng [là nút của chúng tôi] — nhưng điều này không quá tệ cho bước đầu tiên
Vì vậy, làm thế nào mà điều đó chỉ xảy ra?
GHI CHÚ. Sử dụng
/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
const handleFormSubmit = [event] => {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault[];
// TODO: Call our function to get the form data.
const data = {};
// Demo only: print the form data onscreen as a formatted JSON object.
const dataContainer = document.getElementsByClassName['results__display'][0];
// Use `JSON.stringify[]` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify[data, null, ' '];
// ...this is where we’d actually do something with the form data...
};/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
const handleFormSubmit = [event] => {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault[];
// TODO: Call our function to get the form data.
const data = {};
// Demo only: print the form data onscreen as a formatted JSON object.
const dataContainer = document.getElementsByClassName['results__display'][0];
// Use `JSON.stringify[]` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify[data, null, ' '];
// ...this is where we’d actually do something with the form data...
};/**
* A handler function to prevent default submission and run our custom script.
* @param {Event} event the submit event triggered by the user
* @return {void}
*/
const handleFormSubmit = [event] => {
// Stop the form from submitting since we’re handling that with AJAX.
event.preventDefault[];
// TODO: Call our function to get the form data.
const data = {};
// Demo only: print the form data onscreen as a formatted JSON object.
const dataContainer = document.getElementsByClassName['results__display'][0];
// Use `JSON.stringify[]` to make the output valid, human-readable JSON.
dataContainer.textContent = JSON.stringify[data, null, ' '];
// ...this is where we’d actually do something with the form data...
}; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Bước 2. 1 — Hiểu cách hoạt động của // Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];
1
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Lời giải thích đơn giản nhất cho
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Phương thức
1 sử dụng một hàm để chuyển đổi một mảng thành một giá trị duy nhất// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email];
Phương pháp này là một phần của nguyên mẫu
const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];Phải mất hai đối số
- Một chức năng giảm tốc, được yêu cầu
- Một giá trị ban đầu, là tùy chọn [mặc định là
4]const handleFormSubmit = [event] => { /* omitted for brevity */ }; /* * This is where things actually get started. We find the form element using * its class name, then attach the `handleFormSubmit[]` function to the * `submit` event. */ const form = document.getElementsByClassName['contact-form'][0]; form.addEventListener['submit', handleFormSubmit];
Hàm rút gọn được áp dụng cho từng phần tử của mảng. Hàm này chấp nhận bốn đối số
- Giá trị được hàm rút gọn trả về khi nó chạy trên phần tử trước đó [hoặc giá trị ban đầu, nếu đây là phần tử đầu tiên]
- Phần tử mảng hiện tại
- Chỉ số mảng hiện tại
- Toàn bộ mảng, trong trường hợp bộ giảm tốc cần tham chiếu đến nó
Đối với bộ giảm tốc của chúng tôi, chúng tôi chỉ cần hai đối số đầu tiên
Một ví dụ thực sự đơn giản về việc giảm một mảng
Giả sử chúng ta có một dãy số, đại diện cho doanh số bán hàng trong ngày
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Chúng tôi cần xác định tổng doanh số bán hàng trong ngày, vì vậy chúng tôi thiết lập chức năng đơn giản này để cộng doanh số bán hàng
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Sau đó, chúng tôi sử dụng
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];TIỀN BOA. Bạn có thể chạy các ví dụ này trong bảng điều khiển của trình duyệt để tự mình xem kết quả
Bây giờ, nếu chúng ta muốn rút gọn đoạn mã này lại một chút, chúng ta có thể viết toàn bộ nội dung như thế này
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Khi điều này được gọi,
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bây giờ
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];const handleFormSubmit = [event] => {
/* omitted for brevity */
};
/*
* This is where things actually get started. We find the form element using
* its class name, then attach the `handleFormSubmit[]` function to the
* `submit` event.
*/
const form = document.getElementsByClassName['contact-form'][0];
form.addEventListener['submit', handleFormSubmit];Quá trình này được lặp lại cho đến khi tất cả các yếu tố được cộng lại với nhau và chúng ta có tổng doanh số bán hàng trong ngày.
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bước 2. 2 — Giải cấu trúc hàm
Như hiện tại,
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];- Hàm rút gọn để kết hợp các phần tử biểu mẫu của chúng ta thành một đối tượng duy nhất
- Giá trị ban đầu của
0 để giữ dữ liệu biểu mẫu của chúng tôi// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email]; - Một cuộc gọi đến
1 bằng cách sử dụng// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email];
2, cho phép chúng tôi buộc// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email];
1 làm việc với// Find our form in the DOM using its class name. const form = document.getElementByClassName['.contact-form'][0]; // Get the form data with our [yet to be defined] function. const data = getFormDataAsJSON[form]; // Do something with the email address. doSomething[data.email];
11, mặc dù về mặt kỹ thuật, đây không phải là một mảngfunction handleSubmit[event] { event.preventDefault[]; const data = new FormData[event.target]; const value = data.get['email']; console.log[{ value }]; } const form = document.querySelector['form']; form.addEventListener['submit', handleSubmit];
GHI CHÚ. Các thành phần của biểu mẫu thực ra là cái được gọi là
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bước 2. 3 — Viết hàm rút gọn
Đầu tiên, chúng ta cần có hàm giảm tốc. Trong ví dụ đơn giản về giảm mảng, chúng tôi đã sử dụng các giá trị đơn lẻ, điều này sẽ không hoạt động trong trường hợp này. Thay vào đó, chúng tôi muốn thêm từng trường vào một đối tượng có định dạng như thế này
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Vì vậy, chức năng giảm tốc của chúng tôi hoạt động như thế này
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Đối tượng
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Khi chúng tôi trả về
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Bước 2. 4 — Gọi bộ giảm tốc
Để làm cho nó rõ ràng hơn một chút về những gì đang xảy ra trong hàm
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Trong ví dụ trên, chúng tôi thực hiện chính xác điều tương tự như trong
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Chúng tôi có thể thấy đầu ra nếu chúng tôi cập nhật
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Chúng ta có thể thấy ở đây rằng bộ rút gọn được gọi cho mọi phần tử biểu mẫu và đối tượng phát triển với mỗi lần gọi tiếp theo cho đến khi chúng ta có một mục nhập cho mọi giá trị
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Thay đổi
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bước 3. Thêm kiểm tra để đảm bảo chỉ những trường chúng tôi muốn được thu thập
Vấn đề đầu tiên mà chúng ta có thể thấy trong kết quả là các trường có cả thuộc tính
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Name
Email
+
+
+
+ JavaScript
+
+
+ HTML
+
+
+ CSS
+
Submit
Bước 3. 1 — Tạo một hàm để kiểm tra các phần tử hợp lệ
Trước tiên, hãy thêm một chức năng mới vào bút của chúng ta có tên là
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Để trả về
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];- Thuộc tính
7 không trốngName Email + + + + JavaScript + + + HTML + + + CSS + Submit - Thuộc tính
8 không trốngName Email + + + + JavaScript + + + HTML + + + CSS + Submit
Thực hiện kiểm tra này như vậy
+ Name
+
+
Email
Submit
Khá đơn giản, phải không?
Điều này cung cấp cho chúng tôi một cờ cho phép chúng tôi tránh việc thêm các phần tử không sử dụng [như nút] và các trường chưa điền [chẳng hạn như trường Email trống] vào đối tượng dữ liệu biểu mẫu
Bước 3. 2 — Thêm séc vào // Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];
4
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Tiếp theo, chúng tôi cần thêm một kiểm tra
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];
+ Name
+
+
Email
Submit
Bây giờ khi chúng tôi gửi biểu mẫu của mình, đầu ra sạch hơn nhiều
+ Name
+
+
Email
Submit
Tuy nhiên, chúng tôi vẫn chưa ở đó. Trong bước tiếp theo, chúng tôi sẽ xử lý các yếu tố có thể kiểm tra như đầu vào radio và hộp kiểm
Bước 4. Chỉ lưu trữ các trường có thể kiểm tra nếu một trường ở trạng thái function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];
1
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = Object.fromEntries[data.entries[]];
+
+ value.topics = data.getAll["topics"];
console.log[{ value }];
}
const form = document.querySelector["form"];
form.addEventListener["submit", handleSubmit];Bây giờ chúng ta cần một kiểm tra khác để xác định xem có nên thêm một phần tử vào mảng hay không. Chẳng hạn, ngay bây giờ trường
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Rõ ràng, đây là một tin xấu. Vì vậy, hãy sửa nó
Bước 4. 1 — Tạo một hàm để kiểm tra các phần tử có thể kiểm tra
Trước tiên, hãy thêm một chức năng mới để kiểm tra xem giá trị của một phần tử có được coi là hợp lệ để đưa vào đối tượng hay không
Tiêu chí của chúng tôi để xác định yếu tố “hợp lệ” là
- Phần tử không phải là hộp kiểm hoặc đầu vào radio
- Nếu phần tử là hộp kiểm hoặc đầu vào radio, thì phần tử đó có thuộc tính
1function handleSubmit[event] { event.preventDefault[]; const data = new FormData[event.target]; const value = Object.fromEntries[data.entries[]]; + + value.topics = data.getAll["topics"]; console.log[{ value }]; } const form = document.querySelector["form"]; form.addEventListener["submit", handleSubmit];
Thêm phần sau để tạo kiểm tra này
+ Name
+
+
Email
Submit
GHI CHÚ. Phương thức
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bước 4. 2 — Thêm séc vào // Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];
4
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Bây giờ chúng ta có thể thêm séc này vào
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];
+ Name
+
+
Email
Submit
Bây giờ chúng ta có thể chạy mã của mình và thấy rằng đầu ra sạch hơn nhiều
+ Name
+
+
Email
Submit
Điều này tốt hơn nhiều - bây giờ chúng tôi chỉ nhận được các phần tử thực sự có giá trị được đặt
Bước 5. Nếu một trường cho phép nhiều giá trị, hãy lưu trữ chúng trong một mảng
Nhưng chúng ta vẫn chưa hoàn thành, vì biểu mẫu vẫn đang làm rối trường
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Hãy thử chọn cả “Pizza” và “Cake” để xem vấn đề
+ Name
+
+
Email
Submit
Không. Đây là một thảm họa. Chúng tôi cần cả pizza VÀ bánh ngọt. Vì vậy, hãy chắc chắn rằng điều đó có thể xảy ra
Bước 5. 1 — Tạo kiểm tra cho các phần tử chấp nhận nhiều giá trị
Việc kiểm tra xem có cho phép nhiều giá trị hay không có hai phần, vì có hai phần tử cho phép nhiều giá trị
Trước tiên, chúng ta cần thêm dấu kiểm cho bất kỳ hộp kiểm nào. Điều này là đủ đơn giản. chúng tôi chỉ cần kiểm tra xem
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];
+ Name
+
+
Email
Submit
Thứ hai, chúng ta cần thêm kiểm tra cho phần tử
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Điều này phức tạp hơn một chút, nhưng vẫn khá đơn giản. Một
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];
+ Name
+
+
Email
Submit
Bước 5. 2 — Xử lý các hộp kiểm trong // Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];
4
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Bên trong
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Nếu phần tử hiện tại là một hộp kiểm, chúng ta cần lưu trữ [các] giá trị của nó trong một mảng. Trước tiên hãy xem mã, sau đó chúng ta sẽ nói về cách thức hoạt động của nó
+ Name
+
+
Email
Submit
Vì chúng ta cần lấy các giá trị của phần tử vào một mảng, nên chúng ta sử dụng một chút tốc ký trong
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Sau đó, chúng tôi sử dụng
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bây giờ nếu chúng tôi kiểm tra các tùy chọn cho cả bánh pizza và bánh ngọt, chúng tôi sẽ thấy như sau
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Tốt hơn nhiều. Khủng hoảng đã được ngăn chặn, mọi người
Bước 5. 3 — Viết một hàm để truy xuất các giá trị từ nhiều lựa chọn
Bước cuối cùng của chúng tôi trước khi chúng tôi có thể gọi điều này đã hoàn thành là thêm một kiểm tra cho các trường
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Các tùy chọn đã chọn từ đa lựa chọn được lưu trữ trong đối tượng giống như mảng của riêng chúng, được gọi là
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Hãy giữ mọi thứ sạch sẽ bằng cách chuyển cái này thành chức năng riêng của nó
Hàm này sẽ chấp nhận từng tùy chọn, kiểm tra xem thuộc tính
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Thêm phần sau vào bút
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bước 5. 4 — Xử lý các giá trị đa lựa chọn trong // Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];
4
// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Để hoàn thành tất cả những điều này, chúng ta cần thêm một khối
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];// Find our form in the DOM using its class name.
const form = document.getElementByClassName['.contact-form'][0];
// Get the form data with our [yet to be defined] function.
const data = getFormDataAsJSON[form];
// Do something with the email address.
doSomething[data.email];Sau séc
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Thực hiện các cập nhật sau cho bút
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Chạy thử nghiệm nhanh các giá trị đa lựa chọn
Vì biểu mẫu hiện tại của chúng tôi không có lựa chọn với thuộc tính
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Tìm
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit]; function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Bây giờ chúng ta thực sự có thể kiểm tra. Nhấp vào cả hai tùy chọn và gửi biểu mẫu. Đầu ra bây giờ sẽ là
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
+ const value = Object.fromEntries[data.entries[]];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];Sau khi chúng tôi đã kiểm tra, chúng tôi có thể xóa thuộc tính
function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];function handleSubmit[event] {
event.preventDefault[];
const data = new FormData[event.target];
const value = data.get['email'];
console.log[{ value }];
}
const form = document.querySelector['form'];
form.addEventListener['submit', handleSubmit];GHI CHÚ. Đọc các giá trị từ nhiều lựa chọn không được hỗ trợ trong IE11 trở xuống bằng cách sử dụng tập lệnh này. Cá nhân tôi khuyên bạn chỉ nên sử dụng các hộp kiểm — tôi nghĩ nhiều lựa chọn là một trải nghiệm người dùng khó hiểu đối với nhiều người — nhưng nếu bạn cần hỗ trợ chúng trong các trình duyệt cũ hơn, bạn sẽ cần sửa đổi mã này
Kết quả cuối cùng. Các giá trị trường biểu mẫu được thu thập trong một đối tượng để sử dụng dưới dạng JSON
Tại thời điểm này, chúng tôi đã xây dựng một tập lệnh nhỏ sẽ trích xuất các giá trị từ một biểu mẫu dưới dạng đối tượng bằng chữ, có thể dễ dàng chuyển đổi thành JSON bằng cách sử dụng
{
"salutation": "Mr.",
"name": "Jason Lengstorf",
"email": "jason@lengstorf.com",
"subject": "I have a general question.",
"message": "Is this thing on?",
"snacks": ["pizza"],
"secret": "1b3a9374-1a8e-434e-90ab-21aa7b9b80e7"
}Chúng tôi có thể gửi đối tượng JSON trong yêu cầu POST không?
Sử dụng tham số json. Mô-đun yêu cầu cung cấp tham số json mà chúng ta có thể sử dụng để chỉ định dữ liệu JSON trong phương thức POST. tôi. e. , Để gửi dữ liệu JSON, chúng ta cũng có thể sử dụng tham số json của các yêu cầu. phương thức post[] .
Làm cách nào để chuyển dữ liệu JSON trong yêu cầu POST?
2. 1. Tạo đối tượng URL. .
2. 2. Mở một kết nối. .
2. 3. Đặt phương thức yêu cầu. .
2. 4. Đặt tham số tiêu đề loại nội dung yêu cầu. .
2. 5. Đặt loại định dạng phản hồi. .
2. 6. Đảm bảo kết nối sẽ được sử dụng để gửi nội dung. .
2. 7. Tạo phần thân yêu cầu. .
Chúng ta có thể chuyển yêu cầu GET đối tượng JSON không?
Để nhận JSON từ máy chủ, bạn phải gửi yêu cầu HTTP GET và chuyển "Chấp nhận. application/json" tiêu đề HTTP , sẽ cho máy chủ biết rằng máy khách mong đợi phản hồi JSON. Trong ví dụ GET JSON này, chúng tôi gửi một yêu cầu GET tới URL tiếng vang ReqBin với thông báo "Chấp nhận. ứng dụng/json" tiêu đề yêu cầu.
Làm cách nào để chuyển đối tượng JSON trong yêu cầu POST trong Postman?
Để gửi yêu cầu HTTP POST nhằm cập nhật hàng loạt nguồn cấp dữ liệu kênh bằng cách sử dụng đối tượng JSON, hãy định cấu hình POSTMAN như hình minh họa. .
Trong tab Tiêu đề, đặt Loại nội dung là ứng dụng/json
Đặt Nội dung của yêu cầu làm đối tượng JSON thô và nhập đối tượng JSON vào POSTMAN. .
Phản hồi là một đối tượng JSON biểu thị thành công