第一次親自和后臺聯(lián)合開發(fā)，還是值得紀念的。想想看到數(shù)據(jù)輸出到頁面的一瞬間，都有點激動呢！廢話不說，上例子。
接口來自“某接口數(shù)據(jù)平臺”https://www.jisuapi.com/api/driverexam/ 我真的不是打廣告的..
頁面包含題目部分，當(dāng)你做出選擇時，會顯示答案和解釋部分。其中這兩部分除了父級中間代碼都被注釋掉了。因為這個要用js動態(tài)實現(xiàn)呦但是前提要把注釋的樣式寫好啦這樣頁面生成的時候才會有樣式呢！
js都是用框架jquery寫的呢小女不才，會的少哈
//題目
<dl class="test-item">
<!--<dt>
<span class="ti-symbol">單選題</span>
<p class="test-title">
這個標志什么含義？
</p>
</dt>
<dd >
<span class="option">A</span>
<span class="option-con">施工路段繞行</span>
</dd>
<dd >
<span class="option">B</span>
<span class="option-con">雙向交通</span>
</dd>
<dd>
<span class="option">C</span>
<span class="option-con">注意危險</span>
</dd>
<dd >
<span class="option">D</span>
<span class="option-con">左右繞行</span>
</dd>-->
</dl>
//判斷選擇是否正確，及顯示答案
<div class="test-explain">
<!--<p class="answer-right">
回答正確
</p>
<p class="answer-wrong">
回答錯誤
</p>
<p class="correct-answer">
正確答案:B
</p>
<p class="explain">
解釋:
《道路交通安全法》第二十一條規(guī)定：駕駛?cè)笋{駛機動車上道路行駛前，應(yīng)當(dāng)對機動車的安全技術(shù)性能進行認真檢查；不得駕駛安全設(shè)施不全或者機件不符合技術(shù)標準等具有安全隱患的機動車。
</p>
<p class="chapter">
出題章節(jié):安全行車常識
</p>-->
</div>
css就不放了。浪費空間啊~
請求的url是官方給的例子:
http://api.jisuapi.com/driverexam/query?appkey=yourappkey&type=C1&subject=1&pagesize=1&pagenum=1&sort=rand
考過駕照的童鞋都知道，C1，subject=1，科目一啦~
還是上圖吧，我說的廢話連篇。。。
接口詳情
我們就隨機請求一道題好啦~
使用ajax請求回的數(shù)據(jù)，這是一個大大的對象。
這是一個請求回來的數(shù)據(jù)示范哈哈哈哈！
{
"status": "0",
"msg": "ok",
"result": {
"total": "950",
"pagenum": "1",
"pagesize": "3",
"subject": "1",
"type": "C1",
"sort": "normal",
"list": [
{
"question": "未取得駕駛證的學(xué)員在道路上學(xué)習(xí)駕駛技能，下列哪種做法是正確的？",
"option1": "A、使用所學(xué)車型的教練車由教練員隨車指導(dǎo)",
"option2": "B、使用所學(xué)車型的教練車單獨駕駛學(xué)習(xí)",
"option3": "C、使用私家車由教練員隨車指導(dǎo)",
"option4": "D、使用所學(xué)車型的教練車由非教練員的駕駛?cè)穗S車指導(dǎo)",
"answer": "A",
"explain": "《公安部令第123號》規(guī)定：未取得駕駛證的學(xué)員在道路上學(xué)習(xí)駕駛技能，使用所學(xué)車型的教練車由教練員隨車指導(dǎo)。",
"pic": "",
"type": "C1,C2,C3"
},
{
"question": "機動車駕駛?cè)嗽趯嵙?xí)期內(nèi)駕駛機動車不得牽引掛車。",
"option1": "",
"option2": "",
"option3": "",
"option4": "",
"answer": "對",
"explain": "《公安部令第123號》第六十五條規(guī)定：機動車駕駛?cè)嗽趯嵙?xí)期內(nèi)不得駕駛公共汽車、營運客車或者執(zhí)行任務(wù)的警車、消防車、救護車、工程救險車以及載有爆炸物品、易燃易爆化學(xué)物品、劇毒或者放射性等危險物品的機動車；駕駛的機動車不得牽引掛車。",
"pic": "",
"type": "C1,C2,C3"
}
]
}
}
請求回來的數(shù)據(jù)呢，都存在data這個對象里啦，那么你想得到接口的數(shù)據(jù)呢。。就一步一步來啦，比如說，我想知道這個題目是多少，那就是data.result.list[0].question 解釋一下，data是整個大對象，然后找到對象里的result對象，再找到list數(shù)組，數(shù)組用[0]找到坐標哦!
其他的數(shù)據(jù)也是這么找的呢~會獲取數(shù)據(jù)以后，把這些數(shù)據(jù)放在html中對應(yīng)的位置。
這個就是動態(tài)獲取的啦，拿出一個瞧一瞧~
然后要獲取到他們爸爸元素，這樣子動態(tài)數(shù)據(jù)返回的時候找到爸爸就可以啦~
$subject_choice = '<dt><p class="test-title"><span class="ti-symbol">判斷題</span> ' + data.result.list[0].question + '</p></dt>' + '<dd ><span class="option-con">對</span></dd><dd ><span class="option-con">錯</span></dd></dt>';
var $subject_con = $('.test-item');
然后呢，把數(shù)據(jù)送給它爸爸就可以啦~
$subject_con.append($subject_choice);
這個是完成的一小段。
$.ajax({
url : "http://api.jisuapi.com/driverexam/query?appkey=542812e9291ccb52&type=C1&subject=4&pagesize=1&pagenum=1&sort=rand",
method : 'get',
dataType : 'json',
success : function(data) {
var $subject_choice;
if (data.result.list[0].answer == "對" || data.result.list[0].answer == "錯") {
//判斷題
$subject_choice = '<dt><p class="test-title"><span class="ti-symbol">判斷題</span> ' + data.result.list[0].question + '</p></dt>' + '<dd ><span class="option-con">對</span></dd><dd ><span class="option-con">錯</span></dd></dt>';
} else {
//單選題
$subject_choice = '<dt><p class="test-title"><span class="ti-symbol">單選題</span> ' + data.result.list[0].question + '</p></dt>' + '<dd ><span class="option-con">' + data.result.list[0].option1 + '</span></dd>' + '<dd ><span class="option-con">' + data.result.list[0].option2 + '</span></dd>' + '<dd><span class="option-con">' + data.result.list[0].option3 + '</span></dd>' + '<dd ><span class="option-con">' + data.result.list[0].option4 + '</span></dd></dt>';
}
var $subject_con = $('.test-item');
$subject_con.html('');
$subject_con.append($subject_choice);
//如果這題沒有圖片，那么圖片元素移除
if (data.result.list[0].pic == '') {
$('.test-pic').remove();
}
//點擊選項
$('.test-item dd').on('click', function() {
//點擊選項樣式變化
$('.test-item dd').find('.option-con').removeClass('option-act');
$(this).find('.option-con').addClass('option-act');
var $explain = '<p class="answer-right">回答正確</p><p class="answer-wrong">回答錯誤</p><p class="correct-answer">正確答案:' + data.result.list[0].answer + '</p><p class="explain">解釋:' + data.result.list[0].explain + '</p><p class="chapter">出題章節(jié):' + data.result.list[0].chapter + '</p>';
var $explain_con = $('.test-explain');
//答題后顯示答案
function showExplain() {
$explain_con.html('');
$explain_con.append($explain);
}
//判斷是否是判斷題
if (data.result.list[0].answer == "對" || data.result.list[0].answer == "錯") {
//回答正確
if ($(this).find('.option-con').text() == data.result.list[0].answer) {
showExplain();
$('.answer-right').show();
} else {
//回答錯誤
showExplain();
$('.answer-wrong').show();
}
} else {
//單選題
var s = $(this).find('.option-con').text();
//s.substring(0, 1)是把答案中的A,B,C,D提取出來，和正確答案比較哈~
if (s.substring(0, 1) == data.result.list[0].answer) {
//回答正確
showExplain();
$('.answer-right').show();
} else {
//回答錯誤
showExplain();
$('.answer-wrong').show();
}
}
$('.test-item dd').off('click');
})
}
});
嘿嘿，記錄一下自己學(xué)習(xí)情況。以前一直懶，自己文筆也不好，拖拖拖延癥。
以后要慢慢寫起來呢，大家對付看吧。
喵~
