本教程详细介绍了如何使用javascript的fetch api异步提交html表单数据。我们将探讨从传统formdata直接提交到更现代、更灵活的json格式提交，并重点讲解如何利用`async/await`语法简化异步代码、优化错误处理，以及如何正确地将表单数据转换为json格式并设置相应的http请求头，以确保与后端api的顺畅通信。
在现代Web开发中，异步提交表单数据是提升用户体验的关键。Fetch API是JavaScript中用于执行网络请求的强大工具，但正确地使用它来发送表单数据，特别是处理响应和错误，需要一些技巧。本文将指导您完成这一过程，从基础的表单数据收集到高级的异步控制流和数据格式化。
1. 异步提交表单的基础
当用户在Web表单中输入信息并点击提交按钮时，我们通常希望在不刷新整个页面的情况下将数据发送到服务器。这可以通过监听表单的submit事件并阻止其默认行为来实现。
首先，获取表单元素并为其添加事件监听器：
const addBooking_form = document.getElementById("form_addResa");
addBooking_form.addEventListener("submit", (event) => {
// 阻止表单的默认提交行为，即页面刷新
event.preventDefault();
// 后续将在这里处理数据发送逻辑
});2. 收集表单数据
Fetch API可以接受多种类型的请求体，其中一种是FormData对象。FormData可以直接从HTML表单元素构建，它会自动收集所有具有name属性的输入字段的值。
// ...在event.preventDefault()之后...
const formData = new FormData(addBooking_form);
// 您可以通过以下方式查看FormData的内容（仅限开发工具）
// for (let pair of formData.entries()) {
// console.log(pair[0] + ': ' + pair[1]);
// }虽然FormData可以直接作为Fetch请求的body发送（默认Content-Type为multipart/form-data），但许多现代API更倾向于接收JSON格式的数据。
3. 使用async/await简化异步请求
传统的Promise.then().then()链式调用在处理复杂的异步逻辑时可能会变得难以阅读和维护。async/await语法提供了一种更同步、更直观的方式来编写异步代码。
要使用async/await，您需要将事件监听器的回调函数标记为async：
addBooking_form.addEventListener("submit", async (event) => { // 注意这里的 async 关键字
event.preventDefault();
// ... 异步逻辑 ...
});4. 将表单数据转换为JSON格式
为了与大多数RESTful API更好地兼容，通常建议将表单数据转换为JSON对象，并通过Fetch发送。Object.fromEntries()方法可以方便地将FormData对象转换为普通的JavaScript对象。
addBooking_form.addEventListener("submit", async (event) => {
event.preventDefault();
// 使用 Object.fromEntries 将 FormData 转换为普通对象
const formDataObject = Object.fromEntries(new FormData(event.target));
// console.log(formDataObject); // 查看转换后的对象
// ... 后续发送请求 ...
});重要提示： event.target在这里直接引用了触发事件的表单元素，即addBooking_form，这是一种更简洁的写法。
5. 发送JSON格式的Fetch POST请求
当发送JSON数据时，您需要执行两个关键步骤：
- 使用JSON.stringify()将JavaScript对象转换为JSON字符串。
- 在请求头中设置Content-Type: application/json，告知服务器请求体是JSON格式。
同时，结合try...catch块来优雅地处理网络错误和服务器响应错误。
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('新预订提交流程完成');
});HTML表单示例： 为了确保FormData能够正确收集数据，您的HTML表单输入字段必须包含name属性。
<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>请注意，原HTML中的onclick="unselectBooking();"被移除，因为异步提交逻辑已经完全在submit事件监听器中处理。
6. 注意事项与最佳实践
- 服务器端匹配： 确保您的后端API期望接收JSON格式的数据。如果后端期望multipart/form-data，那么直接发送new FormData(formElement)作为body可能更合适，但通常JSON更灵活。
- 错误处理： try...catch块只能捕获网络错误或在await Promise被拒绝时抛出的错误。对于HTTP状态码（如404 Not Found, 500 Internal Server Error），Fetch API的response.ok属性是判断请求是否成功的关键。您应该根据response.ok的值来决定如何处理响应。
- 响应解析： 根据服务器返回的数据类型，使用response.json()（如果返回JSON）或response.text()（如果返回纯文本）来解析响应体。请注意，这些方法本身也返回Promise。
- 用户反馈： 在发送请求时，可以禁用提交按钮或显示加载指示器，并在请求完成后更新UI，提供良好的用户体验。
- 路径解析： fetch("api/booking/new", ...)中的路径api/booking/new是一个相对路径。它会相对于当前页面的URL进行解析。确保这个路径指向正确的后端API端点。
总结
通过本教程，您应该已经掌握了如何使用Fetch API和async/await语法异步提交表单数据。关键在于正确地将表单数据转换为服务器期望的格式（通常是JSON），设置正确的HTTP请求头，并利用try...catch块实现健壮的错误处理。这种方法不仅使代码更清晰、更易于维护，也为用户提供了更流畅的Web体验。
