Khi làm việc với biểu mẫu trong JavaScript, thông thường bạn sẽ cần chuyển đổi dữ liệu biểu mẫu thành đối tượng JavaScript [JSON] để điền một mảng, cơ sở dữ liệu, bộ nhớ cục bộ, gửi nó tới API hoặc thậm chí sử dụng dữ liệu trong ứng dụng của bạn. Chuyển đổi giữa dữ liệu biểu mẫu và JSON là một trong những cách phổ biến nhất để xử lý dữ liệu biểu mẫu vì nó mở ra rất nhiều cách sử dụng khác cho dữ liệu đó
Trong bài viết này, chúng ta sẽ xem cách dễ dàng chuyển đổi dữ liệu biểu mẫu thành đối tượng JavaScript mà không cần cài đặt bất kỳ phụ thuộc không cần thiết nào. Chúng tôi sẽ đạt được điều đó chỉ bằng cách sử dụng API FormData - API trình duyệt tích hợp được sử dụng để lấy giá trị biểu mẫu dưới dạng đối tượng JavaScript
Ghi chú. Ứng dụng này có sẵn dưới dạng bản demo trên CodePen
Hãy bắt đầu bằng cách tạo một biểu mẫu HTML đơn giản chứa một số trường biểu mẫu phổ biến - hai trường nhập, vùng văn bản và nút gửi
Full Name
Email Address
Enter a Message
Send
Bây giờ, chúng ta có thể xem cách chuyển đổi dữ liệu của nó thành JSON [Ký hiệu đối tượng JavaScript] bằng API FormData
API dữ liệu biểu mẫu
FormData là API trình duyệt tích hợp cung cấp cho chúng tôi cách dễ dàng truy cập vào bất kỳ trường nào dưới dạng biểu mẫu HTML. Bước đầu tiên trong việc sử dụng API FormData là lấy phần tử biểu mẫu bằng cách sử dụng một số phương thức HTML DOM thích hợp -
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
3 hoặc const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
4. Sau đó, chúng ta có thể thêm một trình lắng nghe sự kiện gọi const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
5 khi nó đăng ký một sự kiện const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
6 trên biểu mẫuconst form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
Để trình lắng nghe sự kiện hoạt động, chúng ta phải xác định chức năng sẽ xử lý sự kiện
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
6. Bây giờ, hãy để nó tạo đối tượng const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8 và ghi nội dung của nó vào bảng điều khiển________số 8Ghi chú. Chúng tôi đã sử dụng
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
9 để ngăn biểu mẫu tải lại sau khi nhấp vào nút gửi - đây là hành vi mặc định. Đây là một mặc định hợp lý, nhưng để minh họa trong ứng dụng của chúng tôi - chúng tôi sẽ ngăn chặn nó và hiển thị dữ liệu trên div bên phảiKhi bạn chạy mã ở trên, kết quả sẽ là một đối tượng trống, đây không phải là điều chúng ta mong đợi
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
0Mặc dù có vẻ như chúng ta đã tạo một đối tượng rỗng, nhưng thực tế không phải vậy. Đối tượng
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8 đó có một cặp khóa-giá trị cho từng trường trong biểu mẫu của chúng tôi - do đó, chúng tôi cần lặp lại tất cả các cặp đó và lưu trữ chúng trong một đối tượng riêng biệt. Sau đó, chúng ta có thể sử dụng đối tượng đó để truy cập từng trường riêng lẻ trong biểu mẫu của mìnhCó hai cách chính để chúng ta có thể lấy dữ liệu từ API FormData - một là lặp qua từng cặp khóa-giá trị và cách còn lại là sử dụng phương thức
function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
1Cách chuyển đổi dữ liệu biểu mẫu thành JSON bằng vòng lặp
Cách đầu tiên để tạo một đối tượng có thể đọc được từ một đối tượng
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8 là lặp lại các cặp khóa-giá trị của nó và thêm các khóa và giá trị vào đối tượng mới được tạo theo cách thủ công. Với mục đích của bài viết này, chúng tôi sẽ sử dụng vòng lặp function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
3 trong JavaScript. Trước hết, chúng ta sẽ tạo một đối tượng trống và sau đó lặp lại đối tượng const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8 mà chúng ta đã tạo trong phần trướcconst form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
6Ghi chú. Phương thức
function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
3 không thân thiện với function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
6, nếu bạn cần chức năng gọi lại của mình để hỗ trợ các cuộc gọi function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
6 - bạn nên sử dụng vòng lặp function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
8Tại thời điểm này, chúng ta có thể sửa đổi
function callbackFunction[event] {
event.preventDefault[];
const myFormData = new FormData[event.target];
console.log[myFormData];
}
9 từ phần trước để nó xuất chính xác dữ liệu biểu mẫu dưới dạng đối tượngconst form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
2Bây giờ, khi chúng tôi điền vào biểu mẫu của mình và nhấp vào nút gửi, chúng tôi sẽ có đầu ra sau
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
3Hãy xem hướng dẫn thực hành, thực tế của chúng tôi để học Git, với các phương pháp hay nhất, tiêu chuẩn được ngành chấp nhận và bao gồm bảng gian lận. Dừng các lệnh Git trên Google và thực sự tìm hiểu nó
Đối tượng này có tên trường là khóa và giá trị trường tương ứng là giá trị của nó
Cách chuyển đổi dữ liệu biểu mẫu thành JSON với đối tượng. fromEntries[]
Ngoài ra, chúng ta có thể sử dụng phương thức
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
00 thay vì vòng lặp để truy xuất các trường biểu mẫu từ đối tượng const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8. Bằng cách đó, chúng ta không cần tạo một đối tượng trống trước khi bắt đầu - phương thức này cho phép chúng ta chuyển đổi trực tiếp đối tượng const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8 thành đối tượng JavaScript tương ứngconst form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
7Tại thời điểm này, chức năng gọi lại đã sửa đổi của chúng tôi sẽ trông như thế này
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8Một đối tượng được điền bằng cách sử dụng
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
00 sẽ có tên của các trường biểu mẫu làm khóa và các giá trị biểu mẫu tương ứng làm giá trị của nóconst form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
3Ghi chú. Đối với cả hai phương pháp, chúng tôi có thể sử dụng
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
04 để chuyển đổi đối tượng thành chuỗi JSON, sau đó chúng tôi có thể sử dụng chuỗi này để gửi dữ liệu được mã hóa JSON tới APICách nhận nhiều giá trị được chọn trong JSON bằng API FormData
Các phương pháp trên tương thích với hầu hết tất cả các trường biểu mẫu - nhập văn bản, số, radio, chọn. Tuy nhiên, có những lĩnh vực khác có thể phức tạp hơn một chút để làm việc với. Đáng chú ý nhất là hộp kiểm - nó cho phép chọn nhiều giá trị. Nhưng các phương thức được hiển thị trước đó sẽ thay thế tất cả các giá trị đã chọn đó chỉ bằng một giá trị - cuối cùng được lưu trữ trong đối tượng kết quả. Hãy xem cách giải quyết vấn đề đó và lưu trữ tất cả các giá trị đã chọn trong đối tượng kết quả. Giả sử chúng ta có một biểu mẫu HTML với trường hộp kiểm
Chúng ta có thể lấy tất cả dữ liệu đã chọn vào một mảng bằng cách sử dụng phương thức
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
05 trên đối tượng const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
8const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
0Tại thời điểm này, mã của chúng tôi sẽ trông giống như thế này
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
1Và đối tượng được điền sẽ chứa một mảng các giá trị mà người dùng đã chọn trong trường hộp kiểm
const form = document.getElementById['contact-form'];
form.addEventListener['submit', callbackFunction];
2Ghi chú. Bạn có thể xem bản trình diễn trực tiếp này trên CodePen sử dụng tất cả các loại trường biểu mẫu chính và tạo dữ liệu dưới dạng đối tượng JavaScript khi được gửi
Sự kết luận
Trong bài viết này, chúng tôi đã xem xét cách sử dụng API FormData để chuyển đổi dữ liệu biểu mẫu thành các đối tượng JavaScript mà không có bất kỳ phụ thuộc bổ sung nào. Chúng tôi cũng đã học cách xử lý chính xác các loại trường biểu mẫu khác nhau [đầu vào, vùng văn bản, v.v. ], cũng như một số thứ phức tạp hơn như hộp kiểm