Question

我正在尝试将数据从React组件发布到spring boot controller。

我发送了这样的xhr请求，但400失败了

const valToSent = {
  queueId: this.props.queueId,
  flag: restFlag //value is '' or '1'
};

const xhr = new XMLHttpRequest();
xhr.open('post', '/display/clickNext.json', true);
xhr.setRequestHeader('Content-Type', 'application/json');
const data = JSON.stringify(valToSent);
xhr.send(data);

然后我尝试了这个，有效：

const xhr = new XMLHttpRequest();
xhr.open('post', `/display/clickNext.json?queueId=${this.props.queueId}&flag=${restFlag}`, true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send();

但我不知道为什么。他们之间有什么区别？

我搜索并发现了这个问题what's the difference between request payload vs form data as seen in chrome，如果我理解正确，最好的答案告诉他们“内容类型不同，但数据提交的方式不同”，所以我更加困惑为什么我我错了，失败了。

我真的很想理解这个问题，模板文字通过这种方式使用它似乎不那么优雅，更重要的是，它似乎是关于一些基本概念。

Answer 1

第一个是一个合理安排的POST请求，它说它在正文中发送JS并在正文中发送JSON。

第二个是......很奇怪。它说它在正文中发送表单编码数据，但实际上在将数据（没有正确转义）推入查询字符串时，身体中没有任何内容。

告诉为什么明智的要求会得到一个错误的请求＆＃34;来自服务器的错误需要您调试服务器端代码。

vanilla js：发布表单数据工作，但发布json无法正常工作

1 个答案: