Cách hiển thị dữ liệu biểu mẫu trong bảng bằng JavaScript
Trong tất cả các tính năng mà JavaScript có thể mang, các tính năng xử lý biểu mẫu của nó là một trong những tính năng được tìm kiếm và sử dụng nhiều nhất. Tìm hiểu cách sử dụng JavaScript để xử lý biểu mẫu, xác thực và hơn thế nữa Show
Kiến trúc sư phần mềm, . Dmitry Baranovskiy (CC BY 2. 0)Mục lục Cho xem nhiều hơn Biểu mẫu là một phần thiết yếu của trang HTML và các nhà phát triển thường sử dụng JavaScript để giải thích cách chúng hoạt động. Bạn có thể hiểu rõ nhất về lợi ích của việc sử dụng JavaScript với biểu mẫu HTML bằng cách nghiên cứu trước cách thức hoạt động của biểu mẫu với HTML đơn giản. Bản chất của một biểu mẫu là chấp nhận đầu vào từ người dùng và sau đó gửi nó đến một loại máy chủ nào đó. Máy chủ có thể là phần phụ trợ đã tạo ra HTML, nhưng không nhất thiết Vòng đời của một biểu mẫu HTML đơn giản là cho phép người dùng nhập dữ liệu vào các trường của nó, sau đó gửi dữ liệu và tải lại trang. JavaScript cho phép chúng tôi tạo một giải pháp thay thế mượt mà hơn cho dòng sự kiện rắc rối này. Chúng tôi có thể lấy thông tin từ biểu mẫu và gửi nó một cách lặng lẽ theo những cách khác nhau; Kỹ thuật này là một phần của phương pháp Ajax (JavaScript và XML không đồng bộ), đây là một vấn đề lớn khi nó xuất hiện lần đầu tiên. Các cơ chế đã được tinh chỉnh qua nhiều năm nhưng ý tưởng cơ bản vẫn giữ nguyên. Khả năng xử lý dữ liệu và giao tiếp đã cách mạng hóa giao diện người dùng của ứng dụng web một cách linh hoạt và khả năng này tiếp tục cho phép các giao diện web kiểu ứng dụng một trang và nhiều trang. Ajax và JSONMặc dù XML là một thành phần cốt lõi của Ajax khi nó lần đầu tiên xuất hiện, nhưng nó thường không phải là định dạng được sử dụng để trao đổi dữ liệu ngày nay. Ngày nay, chúng tôi chủ yếu sử dụng JSON. Ajaj nghe không hay bằng, vì vậy Ajax bị mắc kẹt. Bất cứ khi nào chúng tôi đang sử dụng JavaScript để kiểm soát tương tác dữ liệu bên ngoài hành vi tiêu chuẩn của trình duyệt, một mẫu Ajax sẽ có hiệu lực Sử dụng JavaScript trong các biểu mẫu HTMLNgoài việc sử dụng JavaScript để thay đổi vòng đời của dữ liệu biểu mẫu, chúng tôi có thể sử dụng nó cho nhiều dịch vụ khác như xác thực đầu vào và bật các tính năng phức tạp hơn trong các trang biểu mẫu của chúng tôi, như thanh trượt và con thoi Hãy bắt đầu bằng cách xem xét một biểu mẫu HTML và một số JavaScript cơ bản đi kèm với nó, như thể hiện trong Liệt kê 1. Bạn cũng có thể xem ví dụ này đang chạy trong một câu đố trực tiếp Liệt kê 1. Một biểu mẫu HTML đơn giản với JavaScript
Liệt kê 1 rất đơn giản nhưng nó có tất cả các thành phần cơ bản của một biểu mẫu HTML với JavaScript. Trong trường hợp này, JavaScript lấy giá trị đầu vào và hiển thị nó trong cửa sổ bật lên cảnh báo. Dưới đây là tổng quan về các phần của trang
Hành động biểu mẫu trong JavaScriptHãy dành một phút để thảo luận về thuộc tính hành động trên biểu mẫu. Khi được xử lý bởi hành vi mặc định của trình duyệt, trường hành động là một URL cho trình duyệt biết nơi gửi dữ liệu. Khi chúng tôi kiểm soát dữ liệu bằng JavaScript và Ajax, chúng tôi chỉ định thủ công nơi chúng tôi sẽ gửi thông tin (một cách là sử dụng trường dữ liệu với lệnh gọi 6, tôi sẽ trình bày ngay sau đây). Đôi khi, bạn sẽ thấy URL được đặt trên biểu mẫu và sau đó JavaScript sẽ lấy giá trị từ trường hành động của biểu mẫu theo chương trình để sử dụng làm đích cho một yêu cầu Ajax. Bạn luôn có thể tìm thấy hành động biểu mẫu bằng cách xem trường hành động; . 7Sử dụng Ajax ở dạng HTMLBây giờ, hãy làm điều gì đó thú vị hơn một chút với dữ liệu trong biểu mẫu của chúng tôi. Khi bắt đầu, chúng ta có thể gửi nó tới một API từ xa để thực hiện một số thao tác Ajax đơn giản. Chúng tôi sẽ sử dụng điểm cuối https. //tiếng vang. zuplo. io, lấy bất cứ thứ gì nó nhận được và lặp lại nó. Chúng ta sẽ sửa đổi JavaScript của mình để trông giống như Liệt kê 2 và chúng ta không cần thay đổi HTML chút nào. (Bạn cũng có thể kiểm tra phiên bản trực tiếp tại đây. ) Liệt kê 2. Xử lý biểu mẫu với tiếng vang từ xa
Trong Liệt kê 2, ban đầu chúng ta làm điều tương tự bằng cách lấy giá trị từ đầu vào của biểu mẫu. Tuy nhiên, thay vì chỉ hiển thị nó trong một cảnh báo, chúng tôi sử dụng API Tìm nạp để gửi nó đến dịch vụ từ xa của chúng tôi. Sau đó, chúng tôi sử dụng lời hứa 6 (thông qua chuỗi 9) để làm điều gì đó với phản hồi. Trong trường hợp của chúng tôi, chúng tôi chỉ cần mở một cảnh báo. Nhưng ở đây chúng ta đã thấy bản chất của Ajax và xử lý dữ liệu biểu mẫu không đồng bộ. Khả năng kiểm soát chi tiết dữ liệu và mạng như thế này là tính năng dứt khoát cho phép giao diện người dùng hiện đạiAPI tìm nạpFetch API và phương thức 0 của nó được tích hợp vào trình duyệt. Đến với nó khi mới bắt đầu, cái tên “tìm nạp” hơi gây hiểu nhầm. API này không chỉ tìm nạp; . Fetch API là sự kế thừa hiện đại của 2 trước đó. Nó không chỉ làm tốt công việc thay thế API đó mà còn đủ mạnh để không cần đến thư viện của bên thứ ba như Axios trong nhiều trường hợpLàm việc với định dạng dữ liệu trong HTMLKhi chúng tôi gửi yêu cầu qua dây bằng tìm nạp hoặc bất kỳ cơ chế nào khác trong trình duyệt, chúng tôi có thể chọn cách định dạng dữ liệu mà chúng tôi thu thập được từ biểu mẫu. Trong thực tế, một cách tiếp cận phổ biến là sử dụng JSON, đặc biệt là với các dịch vụ RESTful. Theo cách tiếp cận đó, bạn sắp xếp JSON bằng cách chuyển đổi các trường và giá trị của chúng thành một đối tượng JavaScript, sau đó gửi nó dưới dạng một chuỗi trong phần thân của yêu cầu. (Có thể kết hợp một số thông tin trong URL dưới dạng tham số truy vấn, trong đó thông tin đó phải được mã hóa URL, nhưng đối với dữ liệu phức tạp, nội dung yêu cầu sẽ hữu ích hơn. ) Giả sử chúng ta đã quyết định về phần thân JSON, câu hỏi sẽ trở thành. làm cách nào để biến biểu mẫu thành JSON? . Hai cách tiếp cận với vanilla JavaScript là sử dụng một đối tượng 3 để bọc biểu mẫu hoặc sử dụng phương thức 4. Cả hai tùy chọn đều được hiển thị trong Liệt kê 3 và phiên bản trực tiếp có tại đây. (Lưu ý rằng sau đây tôi sẽ không trình bày việc thực sự gửi dữ liệu vì bạn đã biết cách thực hiện điều đó. Chúng tôi sẽ đặt JSON được sắp xếp theo thứ tự vào phần thân yêu cầu. )Liệt kê 3. Sử dụng FormData hoặc Object. fromEntries để biến biểu mẫu thành JSON
Bạn có thể nhận thấy trong Liệt kê 3 rằng tôi đã thêm một vài điều khiển mới—bộ chọn phạm vi và màu sắc—để làm cho JSON thú vị hơn. Nếu bạn nhấp vào nút bây giờ, bạn sẽ nhận được thông báo với văn bản như vậy. 5. Các cách tiếp cận này tạo JSON hợp lệ với ít phiền phức nhất nhưng lại gặp sự cố với các biểu mẫu phức tạp hơn. Ví dụ: đầu vào nhiều lựa chọn sẽ bị hỏng với 6 và chúng yêu cầu xử lý thêm bằng cách sử dụng 3. Xem Stack Overflow để thảo luận tốt về những vấn đề nàyBạn cũng có thể gặp sự cố với tệp tải lên. Đầu vào tệp thực sự gửi dữ liệu nhị phân trong trường của họ. Cũng có thể có đầu vào tệp nhiều lựa chọn, tệp này sẽ gửi một mảng các khối nhị phân. Xem Cách dễ dàng chuyển đổi Biểu mẫu HTML thành JSON để biết mô tả hay về cách xử lý vấn đề này và các vấn đề khác tương tự (chẳng hạn như nhiều trường có cùng tên) khi tạo JSON theo cách thủ công trong số 8Thẩm địnhBạn đã có sở thích xử lý dữ liệu dưới dạng biểu mẫu. Quay lại những ngày đầu, xác thực biểu mẫu là một trong những cách gọi chính của JavaScript. Kể từ đó, các trình duyệt đã giới thiệu tính năng xác thực khá mạnh mẽ cho các biểu mẫu, nhưng vẫn còn chỗ để sử dụng JavaScript. Ví dụ: trình duyệt có thể xử lý nhiều nhu cầu xác thực như email, phạm vi số hoặc thậm chí biểu thức chính quy dạng tự do. Nhưng những gì về một cái gì đó liên quan nhiều hơn? Cơ bản hơn nữa, trình duyệt không thể thực hiện kiểm tra xác thực back-end. Điều đó có nghĩa là, điều gì sẽ xảy ra nếu chúng ta có một trường tên người dùng có xác thực cho biết rằng nó không thể sử dụng lại tên người dùng hiện có? . Người dùng nhập một giá trị, chúng tôi gửi yêu cầu với giá trị đó và máy chủ so sánh giá trị đó với giá trị trong cơ sở dữ liệu, sau đó gửi phản hồi cho chúng tôi biết liệu tên người dùng có hợp lệ hay không Chúng tôi có thể thực hiện loại xác thực này ở một số nơi. Chúng tôi có thể làm điều đó khi người dùng gửi biểu mẫu hoặc khi trường tên người dùng bị mờ (có nghĩa là nó mất tiêu điểm) hoặc thậm chí khi người dùng nhập (đối với điều này, chúng tôi sẽ sử dụng một số loại điều chỉnh hoặc loại bỏ thoát để đảm bảo nó . Liệt kê 4 và phiên bản trực tiếp của mã trên fiddle sẽ cho bạn biết cách hoạt động của một xác thực đơn giản Liệt kê 4. Xác thực đơn giản hộp văn bản trong khi gõ
Liệt kê 4 giới thiệu một vài ý tưởng mới. Hiện tại có một thành phần đoạn văn có ID là “ 9”, chúng tôi sẽ sử dụng phần tử này để hiển thị thông báo lỗi nếu người dùng chọn một tên người dùng hiện có. Trong JavaScript, chúng tôi đính kèm một trình lắng nghe vào trường 0 theo chương trình bằng cách sử dụng 1, trong khi trước đây chúng tôi đã làm điều đó một cách khai báo trong HTML. Bằng cách lắng nghe sự kiện đầu vào, chúng tôi sẽ được thông báo mỗi khi người dùng nhập (nếu chúng tôi sử dụng sự kiện thay đổi, chúng tôi sẽ được thông báo khi người dùng thực hiện thay đổi bằng cách nhấp vào Enter). Thay vì gửi giá trị của đầu vào ( 2) đến máy chủ để kiểm tra tên người dùng trùng lặp, chúng tôi chỉ có thể kiểm tra nó ở đây dựa trên một mảng (trong trường hợp của chúng tôi, chúng tôi đã đăng ký ba tên Hobbit). Nếu chúng tôi tìm thấy tên đã có trong mảng của mình, chúng tôi sẽ đặt thông báo trên giao diện người dùng bằng cách tìm đoạn “ 9” và đặt văn bản của nó hoặc xóa thông báo lỗi nếu tên không trùng lặp. (Một lần nữa, trong thực tế, chúng tôi sẽ điều tiết các sự kiện để tránh nói lắp trong giao diện người dùng khi các yêu cầu khứ hồi được gửi tới máy chủ. )Nhập trước, tự động đề xuất và tự động hoàn thànhBạn vừa xem một ví dụ đơn giản về xác thực back-end. Bây giờ, chúng ta hãy chú ý một chút đến yêu cầu phổ biến của kiểu chữ (còn được gọi là đề xuất tự động hoặc tự động hoàn thành). Việc Google kết hợp tính năng này đã khiến nó trở nên cực kỳ phổ biến. Ví dụ xác thực từ Liệt kê 4 thực sự khá gần với những điều cơ bản của việc triển khai kiểu chữ. Thay vì kiểm tra các tên người dùng trùng lặp, chúng tôi sẽ tìm kiếm các kết quả có thể đáp ứng những gì đã được nhập cho đến nay, sau đó hiển thị chúng trong danh sách thả xuống hoặc trực tiếp trong trường văn bản Làm cách nào để chèn dữ liệu biểu mẫu vào bảng bằng JavaScript?Nó tạo một phần tử . Lấy phần tử bảng dữ liệu Tạo một hàng bằng phương thức insertRow và chèn nó vào bảng Tạo (các) ô mới bằng phương thức insertCell và chèn chúng vào hàng bạn đã tạo Thêm dữ liệu vào các ô vừa tạo Làm cách nào để hiển thị dữ liệu biểu mẫu bằng JavaScript?Phương thức serializeArray() tạo một mảng đối tượng (tên và giá trị) bằng cách tuần tự hóa các giá trị biểu mẫu . Phương pháp này có thể được sử dụng để lấy dữ liệu biểu mẫu.
Làm cách nào để hiển thị dữ liệu biểu mẫu trong bảng bằng HTML?Tạo thẻ bảng bên dưới thẻ body. Để xác định các hàng, hãy thêm thẻ Table Row(tr) bên dưới bảng. Đối với tiêu đề bảng, hãy sử dụng thẻ Tiêu đề bảng (th) trong hàng cụ thể. Để thêm dữ liệu vào bảng, hãy tạo một hàng và sử dụng thẻ “td” để chèn dữ liệu vào bên trong mỗi hàng .
Làm cách nào để hiển thị dữ liệu biểu mẫu sau khi gửi trong JavaScript?Thuộc tính formtarget chỉ định tên hoặc từ khóa cho biết vị trí hiển thị phản hồi nhận được sau khi gửi biểu mẫu . Thuộc tính formtarget ghi đè thuộc tính target của phần tử |