问题描述
我正在尝试提交POST请求,但收到错误状态代码400,因为我发送的数据格式错误,但我不知道该如何格式化。
Web API应该采用这种格式(Web API运行良好,如果我通过邮递员发送数据,我不会遇到任何麻烦):
[{ "word": "string","Box": 0 }]
这是我发送的:
"["{\"word\": \"Value\",\"Box\": 0 }"]"
有什么格式吗?
这是简化的整个代码:
<form onsubmit="handlePostSubmit()" id="formPost">
<div>
<input type="checkBox" id="chk01" name="ckbWord" value="Value" defaultChecked></input>
<label for="chk01"> value</label>
</div>
<button type="submit" form="formPost" value="Submit">Submit</button>
</form>
<script>
function getWords() {
const words = document.forms[0];
var txt = "";
for (var i = 0; i < words.length; i++) {
if (words[i].checked) {
txt += '{"word": "' + words[i].value + '","Box": 0 }';
}
}
return txt;
}
function handlePostSubmit() {
// params.preventDefault();
const words = getWords();
alert(words);
var x = create(words)
.then(() => {
//Todo: Msg of ok or error
alert("Ok")
});
alert(x);
}
async function create(params) {
const response = await fetch("https://localhost:44312/words",{
method: 'POST',headers: {
'Content-Type': 'application/json',},body: JSON.stringify([params]),});
if (response.ok) {
const resposta = await response.json();
return resposta;
}
throw new Error('Error to save words');
}
</script>
解决方法
我认为不需要使用字符串来构建JSON。
您可以像这样简单地推动对象:
const wordsFromDoc = document.forms[0]
const words = []
for (var i = 0; i < words.length; i++) {
if (words[i].checked) {
words.push({ word: words[i].value,box: 0 });
}
}
return words;
然后您可以将它们传递并稍后JSON.stringify()
,而无需将其包装在数组中。
const response = await fetch("https://localhost:44312/words",{
method: 'POST',headers: {
'Content-Type': 'application/json',},body: JSON.stringify(params),});
,
请注意,您尝试自己制作json字符串,并且在确定,
时包括丢失的txt
是造成错误的原因。
我们可以修复它,但我认为您应该更改实现方式。
我建议使用数组而不是字符串。例如:
function getWords() {
const words = document.forms[0];
const wordsArray = [];
for (var i = 0; i < words.length; i++) {
if (words[i].checked) {
wordsArray.push({word: words[i].value,box: 0 });
}
}
return wordsArray;
}
然后再执行JSON.stringify(param)