使用Fetch API提交表单数据并处理异步响应的实用指南

const formData = new FormData(addBooking_form);
const asyncReqAdd = fetch("api/booking/new", {
    method: "POST",
    body: formData
});

<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">
    </div>
</form>

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

addBooking_form.addEventListener("submit", async (event) => {
    event.preventDefault(); // 阻止表单默认提交行为

    try {
        // 1. 从FormData中提取数据并转换为普通对象
        // event.target 指向触发事件的元素，即表单本身
        const formData = new FormData(event.target);
        const data = Object.fromEntries(formData);

        // 2. 发送异步请求
        const response = await fetch("api/booking/new", {
            method: "POST",
            headers: {
                "Content-Type": "application/json" // 明确告知服务器发送的是JSON数据
            },
            body: JSON.stringify(data) // 将JavaScript对象转换为JSON字符串
        });

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

        // 4. 解析响应数据
        const responseData = await response.json(); // 假设服务器返回JSON数据
        console.log("预订提交成功:", responseData);

        // 示例：更新页面内容
        // 如果页面上有一个名为 'table' 的元素需要更新
        // const table = document.getElementById('table'); // 确保 'table' 元素存在
        // if (table) {
        //     table.innerHTML = JSON.stringify(responseData, null, 2); // 示例：显示响应数据
        // }

    } catch (error) {
        // 5. 错误处理
        console.error("提交预订时发生错误:", error);
        // 可以根据错误类型向用户显示友好的错误消息
        alert("提交失败，请稍后再试或联系管理员。");
    } finally {
        console.log('预订提交流程结束');
    }
});