记录axios的一次bug排除,花费2小时
document.getElementById("btn_submit").onclick = () => {
let brand = {
brandName: "",
companyName: "",
ordered: "",
description: "",
status: ""
};
brand.brandName = document.getElementById("brandName").value;
brand.companyName = document.getElementById("companyName").value;
brand.ordered = document.getElementById("ordered").value;
brand.description = document.getElementById("description").value;
let status = document.getElementsByName("status");
for (let i = 0; i < status.length; i++) {
if (status[i].checked) {
brand.status = status[i].value;
}
}
console.log(brand);
axios({
method: "post",
url: "http://localhost:8080/cookie_war_exploded/brand/insert",
data: brand
}).then(
(res) => {
console.log(res.data);
if (res.data == "success") {
alert("Insert successfully!");
location.href = "brands.html";
} else {
alert("Sorry, insertion failed.")
}
}
).catch((err)=>{
console.log(err);
})
}
这是正确的代码。然而,我最初的代码是:
document.getElementById("btn_submit").onclick = () => {
let brand = {
brandName: "",
companyName: "",
ordered: 0,
description: "",
status: 0
};
brand.brandName = document.getElementById("brandName").value;
brand.companyName = document.getElementById("companyName").value;
brand.ordered = document.getElementById("ordered").value;
brand.description = document.getElementById("description").value;
let status = document.getElementsByName("status");
for (let i = 0; i < status.length; i++) {
if (status[i].checked) {
brand.status = status[i].value;
}
}
console.log(brand);
axios({
method: "post",
url: "http://localhost:8080/cookie_war_exploded/brand/insert",
data: brand
}).then(
(res) => {
console.log(res.data);
if (res.data == "success") {
alert("Insert successfully!");
location.href = "brands.html";
} else {
alert("Sorry, insertion failed.")
}
}
).catch((err)=>{
console.log(err);
})
}
浏览器始终没有报错,数据也能正常提交到数据库,但是始终不会执行到
location.href = “brands.html”;
这一句。甚至连
console.log(res.data);
也没有执行到。这让我严重怀疑axios是不是有bug,但是网上也没查到有效的答案。最后还是自己摸索出来的。算是给自己提个醒吧,value得到的都是字符串,不能给js的整型变量赋值。
-================================-
root cause找到了,在标签下,应当使用<input type=“button”>来创建按钮,而不是直接使用<button>按钮。后者在form中会产生很多问题!