Cách thêm thẻ dữ liệu json vào html?
Nhận các giá trị biểu mẫu dưới dạng đối tượng JSON có thể hơi khó hiểu, nhưng có một tin tốt. Các trình duyệt đã triển khai API tích hợp để nhận các giá trị biểu mẫu giúp điều này trở nên đơn giản và dễ tiếp cận Show
Sử dụng API FormData để truy cập các giá trị biểu mẫu trong JavaScriptTrước khi tôi biết về API FormData, tôi nghĩ việc truy cập các giá trị biểu mẫu trong JavaScript là một điều khó khăn. Nhưng sau khi Suz Hinton cho tôi biết, tất cả đã thay đổi Tóm lại, API FormData cho phép chúng tôi truy cập bất kỳ giá trị trường nào trong biểu mẫu đã gửi bằng API đơn giản Ví dụ nhanh, giả sử chúng ta có biểu mẫu này
Để 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
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 FormDataNế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
API FormData không trực tiếp chuyển đổi các giá trị của biểu mẫu thành JSON, nhưng chúng ta có thể đạt được điều đó bằng cách sử dụng phương thức 6 và chuyển giá trị trả về của nó cho 7, phương thức này trả về một đối tượng JavaScript đơn giảnĐiều này tương thích với 8, vì vậy chúng tôi có thể sử dụng nó để gửi dữ liệu được mã hóa JSON tới API hoặc bất kỳ điều gì khác mà chúng tôi có thể muốn thực hiện với một đối tượng JavaScriptNhận các giá trị đa lựa chọn như hộp kiểm dưới dạng JSON với API FormDataCách tiếp cận 9 trong phần trước hoạt động hiệu quả đối với hầu hết các đầu vào biểu mẫu, nhưng nếu đầu vào cho phép nhiều giá trị — chẳng hạn như hộp kiểm — thì chúng ta sẽ chỉ thấy một giá trị trong đối tượng kết quả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
Bây giờ đối tượng chứa một mảng trong 0 chứa tất cả các giá trị đã kiểm traMộ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ốcViệ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 nặng nề về việc liệu bạn nên sử dụng 1, 2, 3 hay 4 và sau khi cố gắng theo kịp các lý do khác nhau về hiệu suất, ngữ nghĩa và phong cách để đưa ra những lựa chọn đó, não của bạn bắt đầu hóa lỏng và chảy ra ngoài tai bạn. . ”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ựngVà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Ú. Để hiển thị rằng đầu vào 5 sẽ được bao gồm, đầu vào có tên là 6 đã được bao gồm trong biểu mẫu này. Giá trị của nó là một GUID ngẫu nhiênTrướ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 7Thuộc tính 7 của mỗi trường được sử dụng làm khóa của đối tượng và 8 của trường được đặt làm giá trị của đối tượngĐ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 0Điều này đơn giản, dễ đọc như một con người và cũng dễ dàng gửi tới các API chấp nhận dữ liệu 9 trong các yêu cầu (hầu hết trong số đó ngày nay)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
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 để 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 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ẫuTrướ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 0 trên biểu mẫu của mình và ngăn không cho nó thực hiện công việc bình thườngĐể làm điều này, hãy tạo một hàm có tên là 4, sau đó sử dụng 5 để tìm biểu mẫu của chúng ta và đính kèm hàm vào sự kiện 0 của biểu mẫuTạ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); |