如何以 JSON 格式发送表单数据？

如何将表单数据作为 JSON 对象发送

制作 HTML 表单时，通常需要以 JSON 等结构化格式发送数据。为了实现这一点，我们来探讨如何将表单数据转换为 JSON 对象并将其传输到服务器。

将表单数据转换为 JSON（客户端）

要将表单数据转换为 JSON 对象：

1. 使用 JavaScript 的 FormData 对象检索表单数据（例如 const formData = new FormData(form)）。
2. 迭代表单元素并将它们的值提取到 JSON 对象中（例如，let json = JSON.stringify(formData.entries())）。

示例：

< ;pre>

form.addEventListener("submit", function(e ) {

e.preventDefault();

const formData = new FormData(form);
const json = JSON.stringify(formData.entries());

});

设置标头并将 JSON 发送到服务器（服务器端)

获得 JSON 字符串后，您可以使用 XMLHttpRequest 或任何首选的网络请求方法将其发送到服务器。请记住为 JSON 数据设置适当的标头：

<br>xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');<br><p><strong>示例（使用 XMLHttpRequest）：</strong></p><p><pre class="brush:php;toolbar:false"><br>const xhr = new XMLHttpRequest();<br>xhr.open( "POST", "myUrl", true);<br>xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');<br>xhr.send(json);<br> </p>

在服务器上处理接收到的 JSON 数据

在服务器端，您可以将接收到的数据解析为 JSON 对象并相应地访问其属性。

示例（使用 Node.js）：

<br>const body = request.body.toString();<br>const data = JSON.parse(body);<p>console.log(data.first_name);<br>

以上是如何以 JSON 格式发送表单数据？的详细内容。更多信息请关注PHP中文网其他相关文章！