JavaScript——易班優課YOOC課羣在線測試自動答題解決方案(四)答案顯示

前文

JavaScript——易班優課YOOC課羣在線測試自動答題解決方案(一)答案獲取

Spring Boot——易班優課YOOC課羣在線測試自動答題解決方案(二)答案儲存

Spring Boot——易班優課YOOC課羣在線測試自動答題解決方案(三)答案查詢

問題分析

佈局 

解決方案

 //獲取考試信息
    var group=document.getElementById('group-data')
    var groupId=group.getAttribute("data-group-id")
    var examId=group.getAttribute("data-exam-id")
    //獲取問題信息
    questions=document.getElementsByClassName('question-board')
    var question_arr=[]
    Array.from(questions).forEach(q=>{
        question_arr.push(q.id.substr(9))
    })
    var xmlhttp = new XMLHttpRequest();//獲取對象
    xmlhttp.onreadystatechange = function(){//設置回調函數
        if(xmlhttp.readyState == 4){//這裏的4是請求的狀態碼，代表請求已經完成
            if(xmlhttp.status == 200 || xmlhttp.status == 304){//這裏是獲得響應的狀態碼，200代表成功，304代表無修改可以直接從緩存中讀取
                var result = xmlhttp.responseText;//這裏獲取的是響應文本，也可以獲得響應xml或JSON
                console.log(result)
                //解析爲JS對象
                var obj = JSON.parse(result);
                var questionContainer=document.getElementsByClassName('exam-detial-container')[0]
                obj.forEach(q=>{
                    var question=document.getElementById('question-'+q.id)
                    var answer = document.createElement("div");
                    answer.innerHTML = q.question;
                    var child=answer.childNodes[0]
                    child.id='ans-'+q.id
                    questionContainer.insertBefore(child,question)
                    console.log(question)
                    console.log(answer)
                })
            }
        }
    }
    xmlhttp.open("GET","https://www.shenxxg.top/MyZSTU/yooc/group/"+groupId+"/exam/"+examId+"/answer?question="+question_arr);
    xmlhttp.send();//GET請求

運行效果

參考文章

http://caibaojian.com/javascript/jsref/jsref_obj_string.asp

https://www.cnblogs.com/waw/archive/2011/09/11/2173783.html

https://www.cnblogs.com/ldq678/p/9202738.html