Giới thiệu

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 vào một mảng, cơ sở dữ liệu, bộ nhớ cục bộ, gửi dữ liệu đó 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 vô số 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ần phụ thuộc không cần thiết nào. Chúng ta 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 các giá trị biểu mẫu dưới dạng đối tượng JavaScript.

Lưu ý: Ứ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, một vùng văn bản và nút gửi:

<form>
    <div class="form-control">
        <label for="name">Full Name</label>
        <input id="name" name="name" type="text" />
    </div>
    <div class="form-control">
        <label for="email">Email Address</label>
        <input id="email" name="email" type="email" />
    </div>
    <div class="form-control">
        <label for="message">Enter a Message</label>
        <textarea id="message" name="message" rows="6" cols="65"></textarea>
    </div>
    <button class="btn" type="submit">Send</button>
</form>

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) sử dụng API FormData.

Biểu mẫuDữ liệu API

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 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ử hình thức sử dụng một số phương pháp HTML DOM thích hợp – document.querySelector() or document.getElementById(). Sau đó, chúng ta có thể thêm một trình xử lý sự kiện gọi callbackFunction khi nó đăng ký một submit sự kiện có dạng:

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

form.addEventListener('submit', callbackFunction);

Để trình nghe sự kiện hoạt động, chúng ta phải xác định hàm sẽ xử lý submit sự kiện. Bây giờ, hãy làm cho nó tạo ra FormData đối tượng và ghi nội dung của nó vào bảng điều khiển:

function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);
    console.log(myFormData);
}

Lưu ý: Chúng tôi sử dụng preventDefault() để 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 đoạn 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:

FormData {}

Mặc dù có vẻ như chúng ta đã tạo một đối tượng trống nhưng thực tế không phải vậy. Cái đó FormData đối tượng có một cặp khóa-giá trị cho từng trường trong biểu mẫu của chúng ta - do đó, chúng ta 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 mọi cặp khóa-giá trị và hai là sử dụng Object.fromEntries() phương pháp.

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 FormData đối tượng là lặp lại các cặp khóa-giá trị của nó và thêm khóa và giá trị theo cách thủ công vào đối tượng mới được tạo. Với mục đích của bài viết này, chúng tôi sẽ sử dụng forEach() vòng lặp 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 FormData đối tượng chúng ta đã tạo ở phần trước:

const formDataObj = {};
myFormData.forEach((value, key) => (formDataObj[key] = value));

Lưu ý: Sản phẩm forEach() phương pháp không async thân thiện, nếu bạn cần chức năng gọi lại để hỗ trợ async cuộc gọi – bạn nên sử dụng for-of Vòng lặp.

Lúc này chúng ta có thể sửa đổi callbackFunction() 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);

function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = {};
    myFormData.forEach((value, key) => (formDataObj[key] = value));
    console.log(formDataObj);
});

Bây giờ, khi chúng ta điền vào biểu mẫu của mình và nhấp vào nút gửi, chúng ta sẽ có kết quả như sau:

{
    "name": "John Doe",
    "email": "[email protected]",
    "message": "Hello World"
}

Đối tượng này có tên trường làm khóa và giá trị trường tương ứng làm giá trị của nó.

Cách chuyển đổi dữ liệu biểu mẫu thành JSON bằng Object.fromEntries()

Ngoài ra, chúng ta có thể sử dụng Object.fromEnteries() phương thức thay vì các vòng lặp để lấy các trường biểu mẫu từ FormData sự vật. 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 FormData object cho đối tượng JavaScript tương ứng:

const formDataObj = Object.fromEntries(myFormData.entries());

Tại thời điểm này, hàm 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);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    console.log(formDataObj);
});

Một đối tượng được sử dụng Object.fromEnteries() 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ó:

{
    "name": "John Doe",
    "email": "[email protected]",
    "message": "Hello World"
}

Lưu ý: Đối với cả hai phương pháp, chúng ta có thể sử dụng JSON.stringify() để chuyển đổi đối tượng thành chuỗi JSON, sau đó chúng ta 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 trường khác có thể khó làm việc hơn một chút. Điều đá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 đó bằng một giá trị duy nhất – giá trị cuối cùng được lưu trữ trong đối tượng kết quả. Chúng ta 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:

<div class="form-control-2">
    <p class="group-label">Your favourite pet:</p>
    <input type="checkbox" name="favorite_pet" value="Cats" />Cats
    <input type="checkbox" name="favorite_pet" value="Dogs" />Dogs
    <input type="checkbox" name="favorite_pet" value="Birds" />Birds
</div>

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 getAll() phương pháp trên FormData vật:

formDataObj.favorite_pet = myFormData.getAll('favorite_pet');

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);
function callbackFunction(event) {
    event.preventDefault();
    const myFormData = new FormData(event.target);

    const formDataObj = Object.fromEntries(myFormData.entries());
    formDataObj.favorite_pet = myFormData.getAll('favorite_pet');
    console.log(formDataObj);
});

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:

{
    "name": "uhuk",
    "email": "[email protected]",
    "message": "jgghhjb",
    "favorite_pet": [
    "Cats",
    "Birds"
    ]
}

Lưu ý: Bạn có thể kiểm tra này bản demo trực tiếp 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.

Kết luận

Trong bài viết này, chúng ta đã xem xét cách sử dụng API FormData để chuyển đổi dữ liệu biểu mẫu thành đối tượng JavaScript mà không cần bất kỳ sự 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ố trường phức tạp hơn như hộp kiểm.