ajax提交表单json-ajax提交表单数据后端修改数据库数据：示例代码

使用Ajax提交表单数据可以实现在不刷新页面的情况下将表单数据发送到后端进行处理。一般情况下，我们会将表单数据以JSON格式进行提交，以方便后端进行处理和修改数据库数据。

我们需要监听表单的提交事件，并阻止默认的表单提交行为。然后，我们可以使用JavaScript中的XMLHttpRequest对象来发送请求，并将表单数据以JSON格式作为请求的参数发送到后端。

示例代码如下：

// 监听表单的提交事件
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止默认的表单提交行为
  // 获取表单数据
  var formData = {
    username: document.getElementById('username').value,
    password: document.getElementById('password').value
  };
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求方法和URL
  xhr.open('POST', '/api/submit-form', true);
  // 设置请求头，指定发送的数据为JSON格式
  xhr.setRequestHeader('Content-Type', 'application/json');
  // 监听请求的状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，可以在这里处理返回的数据
      console.log(xhr.responseText);
    }
  };
  // 将表单数据转换为JSON字符串
  var jsonData = JSON.stringify(formData);
  // 发送请求
  xhr.send(jsonData);
});

在上述示例代码中，我们首先监听了表单的提交事件，并通过`event.preventDefault()`方法阻止了默认的表单提交行为。然后，我们获取了表单中的用户名和密码字段的值，并将其存储在一个对象`formData`中。

接下来，我们创建了一个XMLHttpRequest对象`xhr`，并使用`xhr.open()`方法设置了请求的方法为POST，并指定了后端处理表单数据的URL。

然后，我们使用`xhr.setRequestHeader()`方法设置了请求头，指定发送的数据为JSON格式。

接着，我们通过`xhr.onreadystatechange`事件监听请求的状态变化，当请求的状态变为4（即请求已完成）且状态码为200时，表示请求成功，我们可以在这里处理返回的数据。

我们使用`JSON.stringify()`方法将表单数据转换为JSON字符串，并通过`xhr.send()`方法发送请求。

这样，当用户提交表单时，表单数据会以JSON格式发送到后端进行处理和修改数据库数据，而页面不会发生刷新。