本教程详细介绍了如何使用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：
MarsX
AI驱动快速构建App，低代码无代码开发，改变软件开发的游戏规则
159 查看详情
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属性。
Salammbô Pergola Salon Jaune 1001 bougiesExterne Interne
请注意，原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体验。
以上就是使用Fetch API提交表单数据并处理异步响应的教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/843266.html
微信扫一扫 
支付宝扫一扫 
