JavaScript 表单发布 JSON 数据

简介

在 Web 开发中，表单是实现用户数据提交的重要途径。随着数据交互方式的不断升级，越来越多的应用开始采用JSON作为其数据格式，在表单提交时发送JSON数据成为开发的新要求。在本文中，我们将介绍如何使用JavaScript使表单提交JSON数据。

步骤

1. 编写表单

先看一个简单的表单，包括姓名、性别、工作和年龄四个字段。

<form id="my-form">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br>

  <label for="gender">性别：</label>
  <select id="gender" name="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select><br>

  <label for="job">工作：</label>
  <input type="text" id="job" name="job"><br>

  <label for="age">年龄：</label>
  <input type="text" id="age" name="age"><br>

  <button type="submit">提交</button>
</form>

2. 监听表单提交事件

使用 addEventListener() 方法监听表单提交事件，当用户点击提交按钮时，表单将会触发 submit 事件。

const myForm = document.getElementById('my-form');

myForm.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止表单默认提交行为
});

3. 收集表单数据

表单提交时需要将表单数据整合为JSON格式，并发送给服务器。使用 JavaScript 收集表单数据的方法有多种，这里介绍其中一种：使用 FormData 对象收集表单数据。

const formData = new FormData(myForm);
const jsonObject = Object.fromEntries(formData.entries());

console.log(jsonObject);

4. 将 JSON 数据发送给服务器

使用 XMLHttpRequest 或 fetch() 将 JSON 数据发送给服务器。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/user');
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

xhr.send(JSON.stringify(jsonObject));

或者使用 fetch() 发送请求：

fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  body: JSON.stringify(jsonObject)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

总结

以上是利用 JavaScript 发布 JSON 数据的完整步骤，从表单收集数据到发送请求。当然，表单中的字段类型和数量可能各不相同，但总的来说，这些步骤都是通用的。希望这篇文章能够帮助到正在做相关开发的程序员们。

References

• FormData
• XMLHttpRequest
• Fetch API