使用Fetch API发送POST请求未返回预期更新数据的问题

我一眼就看到了两个核心问题，这正是你没拿到预期数据的原因：

1. 请求格式不匹配application/x-www-form-urlencoded要求 #

你把Content-Type设为了application/x-www-form-urlencoded，但请求体用的是JSON.stringify(postData)生成的JSON字符串——这完全不符合该格式的规范。这种类型要求数据是键值对拼接的表单格式（类似key1=value1&key2=value2），而不是JSON。

2. 缺少服务器要求的entry字段 #

服务器管理员明确说了请求必须包含entry字段，但你的postData里根本没有这个结构，服务器自然无法正确处理你的请求。

修复后的完整代码 #

function saveForm() {
  var street = document.getElementById("street").value;
  var provinceId = document.getElementById("province").value;
  var provinceName = provinces[provinceId];
  var cityId = document.getElementById("city").value;
  var cityName = cities[cityId].name;
  var message = document.getElementById("message").value;

  // 按照服务器要求，把数据包裹在entry字段中
  var postData = {
    entry: {
      Notes: message,
      Address: `${provinceName},${cityName},${street}`,
    }
  };

  // 转换为application/x-www-form-urlencoded格式的表单数据
  var formData = new URLSearchParams();
  // 因为entry是对象，需要把它序列化为字符串后作为entry字段的值
  formData.append('entry', JSON.stringify(postData.entry));

  console.log("sent: ", formData.toString()); // 可以看到格式化后的表单字符串

  fetch("https://wavy-media-proxy.wavyapps.com/investors-notebook/inst1/", {
    method: "POST",
    body: formData,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
  })
    .then((response) => {
      // 先检查响应状态是否成功
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      // 解析响应体为JSON（如果服务器返回JSON格式）
      return response.json();
    })
    .then((data) => {
      console.log("Success: ", data); // 现在能拿到服务器返回的实际数据了
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

关键修改点说明 #

• 结构调整：把原有数据放入entry字段，满足服务器的格式要求。
• 格式转换：用URLSearchParams生成符合application/x-www-form-urlencoded规范的请求体，而不是直接传JSON。这里因为entry的值是对象，所以先把它序列化为JSON字符串再添加到表单中。
• 响应解析：原来的代码直接打印了fetch返回的Response对象，这只是响应的元数据，不是实际的返回内容。现在我们先调用response.json()（如果服务器返回的是文本，就用response.text()）来解析响应体，才能拿到你预期的带ID的字符串。

额外测试建议 #

• 打开浏览器的开发者工具（F12），查看网络请求的"Payload"标签，确认发送的表单数据格式正确。
• 检查响应的"Preview"或"Response"标签，看看服务器返回的具体内容，方便进一步排查问题。

内容的提问来源于stack exchange，提问作者user20948241