form action json_代码示例

form action是HTML中form元素的一个属性，用于指定表单数据提交的目标URL。当用户点击提交按钮时，浏览器会将表单数据发送到指定的URL，并在该URL上执行相应的操作。

在使用form action时，可以将目标URL设置为服务器端的一个接口，该接口可以处理表单数据的提交，并返回相应的结果。这种情况下，通常会将表单数据以JSON格式进行提交。

示例代码如下：

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="提交">
</form>

在上述示例中，form元素的action属性被设置为"/submit"，表示表单数据将提交到服务器端的"/submit"接口。当用户点击提交按钮时，浏览器会将表单数据封装成JSON格式，并发送到"/submit"接口。

服务器端的接口可以通过解析JSON数据来获取表单中的数据，并进行相应的处理。例如，可以使用JavaScript的fetch函数发送POST请求，并将表单数据以JSON格式进行传递：

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  const jsonData = JSON.stringify(Object.fromEntries(formData.entries()));
  fetch('/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: jsonData
  })
  .then(response => response.json())
  .then(data => {
    // 处理服务器返回的结果
  })
  .catch(error => {
    // 处理请求错误
  });
});

上述代码中，通过监听表单的submit事件，阻止表单的默认提交行为。然后使用FormData对象获取表单数据，并通过Object.fromEntries方法将FormData转换为普通的JavaScript对象。接着，使用fetch函数发送POST请求，将表单数据以JSON格式进行传递，并设置请求头的Content-Type为application/json。通过Promise链式调用处理服务器返回的结果或请求错误。

通过form action和JSON格式的表单数据提交，可以实现前端与后端的数据交互，并进行相应的处理。