使用axios post請求，數據成功傳遞插入數據庫，但是axios并沒有進入then，也沒有進入catch，我先對表單的值進行了驗證，使用了onCmd方法，在校驗成功以后才調用了提交方法，如果一次性全部填寫所有數據點擊添加，就不會有then和catch中任何的代碼執(zhí)行，如果空白框，多次點擊提交onCmd方法中的alert提示多次后，就可以成功執(zhí)行then中的alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理員增加選擇題</title>
<link rel="stylesheet" href="/css/add/add_choice.css">
<link rel="stylesheet" href="/css/add/add.css">
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/add/add_choice.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" >
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="centre">
<!--導航欄-->
<div class="menu">
<div class="admin-picture"></div>
<div class="indexBtn"></div>
<div class="searchBtn"></div>
<div class="addBtn"></div>
</div>
<div class="show-box">
<div class="choice"></div>
<div class="tiankong" onclick="addtiankong()"></div>
<div class="code" onclick="addcode()"></div>
<div class="jianda" onclick="addjianda()"></div>
<div class="program" onclick="addprogram()"></div>
<!--選擇題特有-->
<div class="choice-line"></div>
<div class="addchoice-box">
<form id="addchoice" >
<div class="title"></div>
<span class="problem">題目</span>
<textarea class="problem-box" name="content" data-ng-model="formData" required></textarea>
<span class="A">選項A</span>
<textarea class="A-box" name="sectionA" data-ng-model="formData" required></textarea>
<span class="B">選項B</span>
<textarea class="B-box" name="sectionB" data-ng-model="formData" required></textarea>
<span class="C">選項C</span>
<textarea class="C-box" name="sectionC" data-ng-model="formData" required></textarea>
<span class="D">選項D</span>
<textarea class="D-box" name="sectionD" data-ng-model="formData" required></textarea>
<span class="answer">答案</span>
<input name="answer" type="checkbox" class="A-Btn" value="A">
<span class="a">A</span>
<input name="answer" type="checkbox" class="B-Btn" value="B">
<span class="b">B</span>
<input name="answer" type="checkbox" class="C-Btn" value="C">
<span class="c">C</span>
<input name="answer" type="checkbox" class="D-Btn" value="D">
<span class="d">D</span>
<span class="num">空數</span>
<input class="num-box" name="pronum" type="textarea">
<span class="analysis">解析</span>
<textarea class="analysis-box" data-ng-model="formData" required></textarea>
<span class="knowledge">知識點標簽</span>
<textarea class="knowledge-box" data-ng-model="formData" required></textarea>
<span class="chapter">章節(jié)</span>
<textarea class="chapter-box" data-ng-model="formData" required></textarea>
<span class="course">課程</span>
<textarea class="course-box" name="analysis" data-ng-model="formData" required></textarea>
<button class="btn btn-primary submit" type="submit" onclick="return Cmd()">提交</button>
</form>
</div>
<!--底部-->
<div class="footer">
<span class="wzsy">網站首頁</span>
<span class="qyhz">企業(yè)合作</span>
<span class="lxwm">聯(lián)系我們</span>
<span class="yjfk">意見反饋</span>
<span class="yqlj">友情鏈接</span>
<span class="bqsy">版權所有@中北大學軟件學院</span>
<span class="dz">地址：山西省太原市學院路3號</span>
<span class="yzbm">郵政編碼：030051</span>
</div>
</div>
</div>
<div class="header">
<div class="title-picture"></div>
<div class="admin-picture"></div>
<div class="admin"></div>
<div class="sanjiao"></div>
<div class="exit"></div>
</div>
<script>
/**
* @return {boolean}
*/
$(function(){
let ipt = document.getElementById("addchoice").getElementsByTagName("textarea");
for (var i = 0; i < 5; i++) {
if (ipt[i].value.length === 0) {
alert("題目、選項為必填");
ipt[i].focus();
return false;
}
}
let c = document.getElementById("addchoice").getElementsByClassName("num-box");
if(c[0].value.length===0){
alert("問題數必填");
c[0].focus();
return false;
}
submit();
return true;
});
$(function(){
let analysis = $(".analysis-box").val();
let answer = getCheckValues();
let chapter = $(".chapter-box").val();
let content = $(".problem-box").val();
let course = $(".course-box").val();
let pronum = $(".num-box").val();
let sectionA = $(".A-box").val();
let sectionB = $(".B-box").val();
let sectionC = $(".C-box").val();
let sectionD = $(".D-box").val();
let tips = $(".knowledge-box").val();
this.axios.post('http://localhost:8080/choiceProblem/add', {
analysis: analysis,
answer: answer,
chapter: chapter,
content: content,
course: course,
pronum: pronum,
sectionA: sectionA,
sectionB: sectionB,
sectionC: sectionC,
sectionD: sectionD,
tips: tips
},
{
emulateJSON: true
})
.then(res => {
alert("成");
console.log(res);
})
.catch(err => {
alert("不成");
console.log(err);
})
});
</script>
</body>
</html>為什么沒有執(zhí)行then或者catch呢，前后端完全分離，前端傳值后端返回json，接口測試無誤
先不管其它問題，先這樣修改一下代碼：
方法1<div class="centre">上面的那個script標簽整個挪到下面去
方法2script標簽內的所有內容用如下包裹起來：
$(function() {
//這里放那個script標簽的內容
});直接復制我這個替換你那個：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>管理員增加選擇題</title>
<!-- <link rel="stylesheet" href="/css/add/add_choice.css">
<link rel="stylesheet" href="/css/add/add.css"> -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- <script src="/js/add/add_choice.js"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" >
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="centre">
<!--導航欄-->
<div class="menu">
<div class="admin-picture"></div>
<div class="indexBtn"></div>
<div class="searchBtn"></div>
<div class="addBtn"></div>
</div>
<div class="show-box">
<div class="choice"></div>
<div class="tiankong" onclick="addtiankong()"></div>
<div class="code" onclick="addcode()"></div>
<div class="jianda" onclick="addjianda()"></div>
<div class="program" onclick="addprogram()"></div>
<!--選擇題特有-->
<div class="choice-line"></div>
<div class="addchoice-box">
<form id="addchoice">
<div class="title"></div>
<span class="problem">題目</span>
<textarea class="problem-box" name="content" data-ng-model="formData" required></textarea>
<span class="A">選項A</span>
<textarea class="A-box" name="sectionA" data-ng-model="formData" required></textarea>
<span class="B">選項B</span>
<textarea class="B-box" name="sectionB" data-ng-model="formData" required></textarea>
<span class="C">選項C</span>
<textarea class="C-box" name="sectionC" data-ng-model="formData" required></textarea>
<span class="D">選項D</span>
<textarea class="D-box" name="sectionD" data-ng-model="formData" required></textarea>
<span class="answer">答案</span>
<input name="answer" type="checkbox" class="A-Btn" value="A">
<span class="a">A</span>
<input name="answer" type="checkbox" class="B-Btn" value="B">
<span class="b">B</span>
<input name="answer" type="checkbox" class="C-Btn" value="C">
<span class="c">C</span>
<input name="answer" type="checkbox" class="D-Btn" value="D">
<span class="d">D</span>
<span class="num">空數</span>
<input class="num-box" name="pronum" type="textarea">
<span class="analysis">解析</span>
<textarea class="analysis-box" data-ng-model="formData" required></textarea>
<span class="knowledge">知識點標簽</span>
<textarea class="knowledge-box" data-ng-model="formData" required></textarea>
<span class="chapter">章節(jié)</span>
<textarea class="chapter-box" data-ng-model="formData" required></textarea>
<span class="course">課程</span>
<textarea class="course-box" name="analysis" data-ng-model="formData" required></textarea>
<button class="btn btn-primary submit" type="submit" id="btn">提交</button>
</form>
</div>
<!--底部-->
<div class="footer">
<span class="wzsy">網站首頁</span>
<span class="qyhz">企業(yè)合作</span>
<span class="lxwm">聯(lián)系我們</span>
<span class="yjfk">意見反饋</span>
<span class="yqlj">友情鏈接</span>
<span class="bqsy">版權所有@中北大學軟件學院</span>
<span class="dz">地址：山西省太原市學院路3號</span>
<span class="yzbm">郵政編碼：030051</span>
</div>
</div>
</div>
<div class="header">
<div class="title-picture"></div>
<div class="admin-picture"></div>
<div class="admin"></div>
<div class="sanjiao"></div>
<div class="exit"></div>
</div>
<script>
$(function() {
$("#btn").on("click", function(e) {
e.preventDefault();
Cmd();
})
function Cmd() {
let ipt = document.getElementById("addchoice").getElementsByTagName("textarea");
for (var i = 0; i < 5; i++) {
if (ipt[i].value.length === 0) {
alert("題目、選項為必填");
ipt[i].focus();
return false;
}
}
let c = document.getElementById("addchoice").getElementsByClassName("num-box");
if (c[0].value.length === 0) {
alert("問題數必填");
c[0].focus();
return false;
}
submit();
}
function submit() {
let analysis = $(".analysis-box").val();
let chapter = $(".chapter-box").val();
let content = $(".problem-box").val();
let course = $(".course-box").val();
let pronum = $(".num-box").val();
let sectionA = $(".A-box").val();
let sectionB = $(".B-box").val();
let sectionC = $(".C-box").val();
let sectionD = $(".D-box").val();
let tips = $(".knowledge-box").val();
this.axios.post('http://localhost:8080/choiceProblem/add', {
analysis: analysis,
// answer: answer,
chapter: chapter,
content: content,
course: course,
pronum: pronum,
sectionA: sectionA,
sectionB: sectionB,
sectionC: sectionC,
sectionD: sectionD,
tips: tips
}, {
emulateJSON: true
})
.then(res => {
alert("成");
console.log(res);
})
.catch(err => {
alert("不成");
console.log(err);
})
}
});
</script>
</body>
</html>
這種問題你可以自己先定位，打斷點調試，很容易找到問題，一定要學會調試！
北大青鳥APTECH成立于1999年。依托北京大學優(yōu)質雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數據專業(yè)的國家
北大青鳥中博軟件學院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網學院和江蘇省首批服務外包人才培訓基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術與教育服務機構，發(fā)展為教育服務業(yè)的綜合性企業(yè)集團，成為集合面授教學培訓、網
達內教育集團成立于2002年，是一家由留學海歸創(chuàng)辦的高端職業(yè)教育培訓機構，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔任項目經理從事移動互聯(lián)網管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責任公司從事總經理職務負責iOS教學及管理工作。
浪潮集團項目經理。精通Java與.NET 技術， 熟練的跨平臺面向對象開發(fā)經驗，技術功底深厚。 授課風格 授課風格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網頁制作和網頁游戲開發(fā)。
具有10 年的Java 企業(yè)應用開發(fā)經驗。曾經歷任德國Software AG 技術顧問，美國Dachieve 系統(tǒng)架構師，美國AngelEngineers Inc. 系統(tǒng)架構師。
掃碼關注鍍金池微信號
手機訂課，優(yōu)惠多多