如何使用 Ajax 将 HTML 表单数据传输为 JSON？

使用 HTML 表单数据传输 JSON 数据

在 Web 开发领域，经常需要将数据从 HTML 表单传输到服务器。虽然存在传统方法，但本文探讨了另一种方法：将表单数据作为 JSON 对象发送。

挑战

假设您有一个包含以下内容的 HTML 表单结构：

<code class="html"><form action="myurl" method="POST" name="myForm">
  <label for="first_name">First Name:</label>
  <input type="text" name="first_name" id="fname">
  <label for="last_name">Last Name:</label>
  <input type="text" name="last_name" id="lname">
  <input value="Submit" type="submit" onclick="submitform()">
</form></code>

目标是当用户单击“提交”按钮时，将输入此表单的数据作为 JSON 对象发送。

初始错误

有些人可能会尝试使用此代码：

<code class="javascript">var j = {
  "first_name":"binchen",
  "last_name":"heris",
};
xhr.send(JSON.stringify(j));</code>

但是，此方法会失败，因为它无法从表单输入中检索实际数据。

解决方案

解决此问题的关键在于获取完整的表单数据。这可以使用以下代码来实现：

<code class="javascript">var formData = JSON.stringify($("#myForm").serializeArray());</code>

serializeArray() 方法将表单数据转换为键值对数组。通过将此数组转换为 JSON 字符串，我们就可以获得所需的 JSON 对象。

与 Ajax 集成

要使用 Ajax 传输 JSON 数据，可以使用下面的代码：

<code class="javascript">$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType: "application/json"
});</code>

现在，当用户提交表单时，包含表单数据的 JSON 对象将通过 Ajax 发送到指定的服务器 URL。

这种方法提供了一种方便的方式将 HTML 表单数据作为 JSON 对象发送的有效方法，增强 Web 应用程序的多功能性和功能。

以上是如何使用 Ajax 将 HTML 表单数据传输为 JSON？的详细内容。更多信息请关注PHP中文网其他相关文章！