使用Fetch API提交表单数据并处理异步响应的教程

const addBooking_form = document.getElementById("form_addResa");

addBooking_form.addEventListener("submit", (event) => {
    // 阻止表单的默认提交行为，即页面刷新
    event.preventDefault();

    // 后续将在这里处理数据发送逻辑
});

// ...在event.preventDefault()之后...
const formData = new FormData(addBooking_form);

// 您可以通过以下方式查看FormData的内容（仅限开发工具）
// for (let pair of formData.entries()) {
//     console.log(pair[0] + ': ' + pair[1]);
// }

addBooking_form.addEventListener("submit", async (event) => { // 注意这里的 async 关键字
    event.preventDefault();

    // ... 异步逻辑 ...
});

addBooking_form.addEventListener("submit", async (event) => {
    event.preventDefault();

    // 使用 Object.fromEntries 将 FormData 转换为普通对象
    const formDataObject = Object.fromEntries(new FormData(event.target));
    // console.log(formDataObject); // 查看转换后的对象

    // ... 后续发送请求 ...
});

addBooking_form.addEventListener("submit", async (event) => {
    event.preventDefault();

    const formDataObject = Object.fromEntries(new FormData(event.target));

    try {
        const response = await fetch("api/booking/new", {
            method: "POST",
            headers: {
                'Content-Type': 'application/json' // 明确指定请求体为JSON
            },
            body: JSON.stringify(formDataObject) // 将对象转换为JSON字符串
        });

        // 检查HTTP响应状态码
        if (!response.ok) {
            // 如果响应状态码不是2xx，抛出错误
            const errorText = await response.text();
            throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
        }

        // 解析JSON响应数据
        const data = await response.json();
        console.log("预订成功:", data);

        // 假设有一个元素用于显示结果
        const table = document.getElementById("some_table_id"); // 替换为实际的元素ID
        if (table) {
            table.innerHTML = JSON.stringify(data, null, 2); // 美化JSON输出
        }

    } catch (error) {
        console.error("提交预订时发生错误:", error);
        // 在UI上显示错误信息
        alert(`提交失败: ${error.message || '未知错误'}`);
    }
    console.log('新预订提交流程完成');
});

<form id="form_addResa">
    <div class="fieldset flexCol-around">
        <label for="input_lieu">Lieu *</label>
        <select id="input_lieu" name="place">
            <option value="none">< Séléctionner un lieu ></option>
            <option value="Salammbô">Salammbô</option>
            <option value="Pergola">Pergola</option>
            <option value="Salon Jaune">Salon Jaune</option>
            <option value="1001 Bougies">1001 bougies</option>
        </select>
        <div class="flexRow-around">
            <div class="flexCol-around">
                <label for="input_date">Date *</label>
                <input id="input_date" type="date" name="date">
            </div>
            <div class="flexCol-around">
                <label for="input_time">Heure *</label>
                <input id="input_time" type="time" name="time">
            </div>
        </div>
        <label for="input_nom">Nom *</label>
        <input id="input_nom" type="text" name="name">
        <label for="input_prenom">Prénom *</label>
        <input id="input_prenom" type="text" name="firstName">
    </div>
    <div class="fieldset flexCol-around">
        <label for="input_couverts">Nombre de couverts *</label>
        <input id="input_couverts" type="number" name="coverts">
        <label for="input_intExt">Client interne / externe *</label>
        <select name="intExt" id="input_intExt">
            <option value="ext">Externe</option>
            <option value="int">Interne</option>
        </select>
        <label for="input_contacte">Contacter le client *</label>
        <input id="input_contacte" type="text" placeholder="Numéro de chambre / téléphone / E-mail" name="contact">
    </div>
    <div class="fieldset">
        <textarea id="input_note" placeholder="Note :" name="notes"></textarea>
    </div>
    <div class="flexRow-around">
        <input type="reset" value="Annuler" style="background: white;">
        <input type="submit" value="提交">
    </div>
</form>