如何使用JavaScript的AJAX提交JSON并获取JSON响应？

嘿，我来帮你搞定AJAX提交JSON数据并获取JSON响应的问题！你的代码里有几个关键问题需要修正，我会一步步给你讲清楚正确的实现方式，还有完整的代码示例。

先说说你现有代码里的几个小问题：

• 获取表单值的语法错误：document.forms["myForm"]["machine_id": "TNTEST004"] 这种写法不对，应该通过表单元素的name属性直接取值，比如form["machine_id"].value
• 不能多次调用xhr.send()：这个方法只能执行一次，需要把所有数据打包成一个JSON对象再发送
• 缺少必要的请求头：提交JSON时必须告诉服务器你发送的是JSON格式，否则服务器可能无法正确解析
• 状态判断不完整：除了检查readyState === 4（请求完成），还要验证status是否在200-299区间（表示请求成功）

修正后的完整XMLHttpRequest实现 #

window.onload = function() {
  document.getElementById("Save").onclick = function fun() {
    // 1. 获取表单元素和对应值
    const form = document.forms["myForm"];
    const machineId = form["machine_id"].value; // 假设表单里有name为machine_id的输入框
    const wifiMac = form["wifi_mac_address"].value; // 假设表单里有name为wifi_mac_address的输入框

    // 2. 把数据打包成JSON对象
    const postData = {
      machine_id: machineId,
      wifi_mac_address: wifiMac
    };

    const url = "http://192.168.1.9:8080/machine_reg/";
    const xhr = new XMLHttpRequest();

    // 3. 配置POST请求
    xhr.open('POST', url, true);
    // 设置请求头，告知服务器发送的是JSON格式
    xhr.setRequestHeader('Content-Type', 'application/json');
    // 设置响应类型为JSON，浏览器会自动解析返回的JSON字符串
    xhr.responseType = 'json';

    // 4. 监听请求状态变化
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) { // 请求已完成
        if (xhr.status >= 200 && xhr.status < 300) { // 请求成功
          // 直接使用解析后的JSON响应
          console.log("注册成功！响应数据：", xhr.response);
          // 这里可以添加成功后的逻辑，比如提示用户、更新页面等
        } else {
          // 处理请求失败的情况
          console.error("请求失败，状态码：", xhr.status);
          console.error("错误信息：", xhr.responseText);
        }
      }
    };

    // 5. 发送请求：把JSON对象转为字符串发送
    xhr.send(JSON.stringify(postData));
  };
};

关键步骤解释 #

• 获取表单数据：通过document.forms["表单name"]拿到表单对象，再通过元素的name属性取值，这是标准的表单数据获取方式。
• 打包JSON：把需要提交的字段整理成JavaScript对象，后续用JSON.stringify()转为JSON字符串发送。
• 设置请求头：Content-Type: application/json是必须的，否则服务器可能会把你的JSON数据当成普通文本处理。
• 响应类型配置：xhr.responseType = 'json'可以让浏览器自动解析服务器返回的JSON字符串，省去手动调用JSON.parse()的麻烦。
• 发送请求：xhr.send()只能调用一次，参数是转为字符串的JSON数据。

更现代的替代方案：Fetch API #

如果你想写更简洁的代码，可以使用浏览器原生的fetch API，它基于Promise，语法更直观：

window.onload = function() {
  document.getElementById("Save").onclick = async function fun() {
    const form = document.forms["myForm"];
    const postData = {
      machine_id: form["machine_id"].value,
      wifi_mac_address: form["wifi_mac_address"].value
    };

    try {
      const response = await fetch("http://192.168.1.9:8080/machine_reg/", {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(postData),
      });

      if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
      }

      const responseData = await response.json();
      console.log("注册成功！", responseData);
      // 这里添加成功后的业务逻辑
    } catch (error) {
      console.error("出错了：", error);
      // 这里添加错误处理逻辑
    }
  };
};

内容的提问来源于stack exchange，提问作者sathish smart sagar