有一个带有 html 标记的文件。js 文件已附加到其中。
您需要使用 fetch 发出 POST 请求。我想在请求正文中使用变量。
我通过单击列表项来获取变量的值。在html文件中:
当您单击列表项时,将调用 getType 函数:
<li onclick="getType(event)" v-for="i in types"> {{ i }} </li>
(类型只是一个数组)
单击后应发生请求的按钮(也位于 html 文件中):
<div id="button">
<button class="btn btn-success"
onclick="
sendCalcRequestF('POST', requestCalcURL, body)
.then(data => console.log(data))
.catch(err => console.log(err))
"
ondblclick="echo()">
рассчитать
</button>
</div>
js文件中的代码:
let chooseType;
function getType(event) {
chooseType = event.target.innerHTML;
console.log(chooseType);
return chooseType;
}
const body = {
type: chooseType,
}
const headers = {
'Content-type': 'application/json'
}
function sendCalcRequestF(method, url, body) {
return fetch(url, {
method: method,
body: JSON.stringify(body),
headers: headers
}).then(response => {
return response.json()
})
}
function echo() {
console.log("body", body)
}
使用getType获取到的数据正常会输出到控制台,但是请求的body最终还是空的(输出到控制台的时候就可以看到,请求不起作用)
输出到控制台时的正文如下所示(我使用 echo() 函数输出它,该函数在 js 文件中描述,并在双击按钮时调用):
{type: undefined}
此外,相同的代码在另一个主体中完全可以正常工作,其中该值最初被设置:
const body2 = {
type: "шрот"
}
(我没有更改其余的代码,我只是将 body2 作为参数而不是 body 传递给函数,一切正常)