Gửi dữ liệu từ form HTML đến API URL bằng JavaScript (POST Request)

Cách gửi dữ liệu từ form HTML đến API URL bằng JavaScript với phương thức POST. Bao gồm mã nguồn chi tiết và giải thích từng dòng về cách sử dụng Fetch API để xử lý dữ liệu form và gửi yêu cầu POST.

Dưới đây là đoạn mã JavaScript để gửi dữ liệu từ form HTML đến API URL bằng phương thức POST:

<form id="myForm">
    <input type="text" name="username" placeholder="Enter your username" required />
    <input type="email" name="email" placeholder="Enter your email" required />
    <button type="submit">Submit</button>
</form>

document.getElementById('myForm').addEventListener('submit', async function (event) {
    event.preventDefault();  // Ngăn chặn việc gửi form mặc định

    const formData = new FormData(this);  // Thu thập dữ liệu từ form

    const data = Object.fromEntries(formData);  // Chuyển đổi dữ liệu form thành đối tượng JSON

    try {
        const response = await fetch('https://api.example.com/submit', {
            method: 'POST',  // Phương thức POST
            headers: {
                'Content-Type': 'application/json'  // Loại dữ liệu gửi đi
            },
            body: JSON.stringify(data)  // Chuyển dữ liệu thành JSON
        });

        if (response.ok) {
            const result = await response.json();  // Nhận phản hồi từ API
            console.log('Success:', result);  // Xử lý kết quả trả về
        } else {
            console.error('Error:', response.statusText);  // Xử lý lỗi
        }
    } catch (error) {
        console.error('Fetch error:', error);  // Xử lý lỗi kết nối
    }
});

Giải Thích Chi Tiết Từng Dòng Code:

1. HTML Form:

   • form id="myForm": Định nghĩa form với id là myForm.
   • <input>: Các trường input để người dùng nhập dữ liệu.
   • <button>: Nút bấm để gửi form.

2. document.getElementById('myForm').addEventListener('submit', ...)

   • Bắt sự kiện khi form được gửi (submit).

3. event.preventDefault();

   • Ngăn chặn hành động mặc định của trình duyệt khi gửi form, để xử lý thủ công bằng JavaScript.

4. const formData = new FormData(this);

   • Tạo một đối tượng FormData từ form, chứa tất cả dữ liệu đã nhập.

5. const data = Object.fromEntries(formData);

   • Chuyển đổi dữ liệu từ FormData thành đối tượng JSON để gửi qua API.

6. const response = await fetch('https://api.example.com/submit', { ... });

   • Sử dụng fetch để gửi yêu cầu POST đến URL của API, trong đó url là 'https://api.example.com/submit'.

7. method: 'POST'

   • Đặt phương thức HTTP là POST để gửi dữ liệu.

8. headers: { 'Content-Type': 'application/json' }

   • Đặt tiêu đề yêu cầu, cho biết dữ liệu gửi đi là JSON.

9. body: JSON.stringify(data)

   • Chuyển đổi đối tượng dữ liệu data thành chuỗi JSON để gửi trong phần thân (body) của yêu cầu.

10. if (response.ok)

    • Kiểm tra nếu yêu cầu thành công.

11. const result = await response.json();

    • Chuyển đổi phản hồi từ API thành định dạng JSON.

12. console.log('Success:', result);

    • In kết quả trả về thành công ra console.

13. console.error('Error:', response.statusText);

    • In thông báo lỗi nếu yêu cầu không thành công.

14. catch (error)

    • Xử lý các lỗi kết nối hoặc ngoại lệ xảy ra.

Phiên bản JavaScript:

Đoạn mã trên tương thích với các trình duyệt hiện đại hỗ trợ ES8 (ECMAScript 2017) và các phiên bản mới hơn. Đảm bảo trình duyệt của bạn hỗ trợ async/await và fetch.