Cách lưu trữ dữ liệu biểu mẫu trong javascript?

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ẫu

const 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ố 8

Ghi 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ải

Khi 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);

0

Mặ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ình

Có 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);
}

1

Cá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ước

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

6

Ghi 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);
}

8

Tạ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ượng

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

2

Bâ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);

3

Hã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 ứng

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

7

Tạ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);

8

Mộ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);

3

Ghi 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 API

Cá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);

8

const form = document.getElementById('contact-form');

form.addEventListener('submit', callbackFunction);

0

Tạ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);

1

Và đố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);

2

Ghi 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

Làm cách nào để lưu trữ FormData trong JavaScript?

Làm cách nào để lưu giá trị biểu mẫu trong JavaScript?

Làm cách nào để đăng FormData trong JavaScript?