javascript - 通过 javascript 从 XML 中检索值

Question

我有一个 XML 有 3 个问题，每个有 4 个选项并回答。我想随机选择一个问题并将其显示在 html div 标签中。请帮忙做这件事。

我正在获取对象而不是 xml 节点中的值。

<exam>
<sitescope>
    <q1>what is sitescope 1</q1>
    <q1a1>1</q1a1>
    <q1a2>2</q1a2>
    <q1a3>3</q1a3>
    <q1a4>4</q1a4>
    <q1ans>1</q1ans>
    <q2>what is sitescope 1</q2>
    <q2a1>1</q2a1>
    <q2a2>2</q2a2>
    <q2a3>3</q2a3>
    <q2a4>4</q2a4>
    <q2ans>1</q2ans>
    <q3>what is sitescope 1</q3>
    <q3a1>1</q3a1>
    <q3a2>2</q3a2>
    <q3a3>3</q3a3>
    <q3a4>4</q3a4>
    <q3ans>1</q3ans>
</sitescope>

这是我使用的 HTML 页面：

<html>
<script type="text/javascript">
function questions() {
    var request = new XMLHttpRequest();
    request.open("GET", "/questions.xml", false);
    request.send();
    var xml = request.responseXML;

    var qstn = xml.getElementsByTagName("q1").item(0).nodeValue;
    var qstnans1 = xml.getElementsByTagName("q1a1").item(0).nodeValue;
    var qstnans2 = xml.getElementsByTagName("q1a2").item(0).nodeValue;
    var qstnans3 = xml.getElementsByTagName("q1a3").item(0).nodeValue;
    var qstnans4 = xml.getElementsByTagName("q1a4").item(0).nodeValue;


    document.getElementById("q1").innerHTML = qstn;
    document.getElementById("q1a1").innerHTML = qstnans1;
    document.getElementById("q1a2").innerHTML = qstnans2;
    document.getElementById("q1a3").innerHTML = qstnans3;



</script>


<form>
    <div>
        <div>
            <div style="float: left;" id="qstn1"></div>
            <div id="q1"></div>
        </div>
        <br>
        <div>
            <input type="radio" name="1" style="float: left;">
            <div id="q1a1"></div>
        </div>
        <br>
        <div>
            <input type="radio" name="1" style="float: left;">
            <div id="q1a2"></div>
        </div>
        <br>
        <div>
            <input type="radio" name="1" style="float: left;">
            <div id="q1a3"></div>
        </div>
        <br>
        <div>
            <input type="radio" name="1" style="float: left;">
            <div id="q1a4"></div>
        </div>
    </div>

</form>

score 1 · Accepted Answer

这是json方式的完整工作代码

它将答案存储到一个数组中并在最后打印出来。

洗牌功能
缓存问题
存储答案
添加和删除不必要的事件处理程序。
打印出结果
使用文档片段
无限的问题
无限的答案
与外部库兼容
并且引用都是在加载时定义的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quiz</title>
<script>
(function(W){
var q,current=0,question,answers,btn,D,A=[];
function shuffleArray(d){for(var c=d.length-1;c>0;c--){var b=Math.floor(Math.random()*(c+1));var a=d[c];d[c]=d[b];d[b]=a}return d}
function ajax(a,b,c){c=new XMLHttpRequest;c.open('GET',a);c.onload=b;c.send()}
function set(){q=shuffleArray(JSON.parse(this.response));next()}
function next(){
 var a=q[current];
 question.innerText=a.question;
 var f=D.createDocumentFragment();
 for(var c=0,d;d=a.answers[c];++c){
  var g=D.createElement('input'),l=D.createElement('label');
  g.type='radio';g.name='a';g.value=d;  
  l.appendChild(g);l.appendChild(D.createTextNode(d));
  f.appendChild(l); 
 }
 btn.addEventListener('click',ok,false);
 answers.innerHTML='';
 answers.appendChild(f);
 current++;
}
function ok(){
 btn.removeEventListener('click',ok,false);var a=current-1;
 A[a]={'q':q[a].question,'a':answers.querySelector('input[type="radio"]:checked').value}
 if(current<q.length){next()}else{done()}
}
function done(){
 question.parentNode.removeChild(question);
 answers.parentNode.removeChild(answers);
 btn.parentNode.removeChild(btn);
 D.body.appendChild(D.createElement('pre')).innerText=JSON.stringify(A,null,' '); 
}
function init(){
 D=W.document;
 answers=D.getElementById('answers');
 question=D.getElementById('question');
 btn=D.getElementById('btn');
 ajax('exam.js',set);
}
W.addEventListener('load',init,false);
})(window)
</script>
</head>
<body>
<div id="question"></div>
<div id="answers"></div>
<button id="btn">OK</button>
</body>
</html>

json

[
 {
  "question":"what is a?",
  "answers":["a","b","c","d"]
 },
 {
  "question":"what is b?",
  "answers":["a","b","c","d"]
 },
 {
  "question":"what is c?",
  "answers":["a","b","c","d"]
 }
]

score 0 · Accepted Answer

您应该考虑将您的 xml 结构更改为更易于管理的结构，或者按照建议使用 JSON。但是，因为我有时间杀人

function displayQn(xml, qnIdx) {
  var prefix = 'q' + qnIdx;
  document.getElementById("q").innerHTML = xml.querySelector(prefix).textContent;
  for ( var i = 1; i < 5; i++ ) {
    document.getElementById('a' + i).innerHTML = xml.querySelector(prefix + 'a' + i).textContent;
  }
}
//...
var xml = request.responseXML;
var total = parseInt(xml.querySelector('sitescope').lastElementChild.tagName.replace(/q(\d+)ans/, '$1'), 10)
var qnIdx = Math.floor(Math.random() * total) + 1;
displayQn(xml, qnIdx);

JSFiddle 链接：http: //jsfiddle.net/UfQea/3/

score 0 · Accepted Answer

因此，xml 以这种方式正确构建。

在 html 中，我添加了 Fisher Yates Shuffle 函数，因为它是一个考试，所以它返回一个更实数的数字而不是仅仅length*Math.random();

n包含打乱的答案索引。

代码还没有完成……它只是显示了第一个随机问题。

xml

<?xml version="1.0" encoding="utf-8"?>
<exam>
<item>
<question>what is a?</question>
<answers>
 <answer>a</answer>
 <answer>b</answer>
 <answer>c</answer>
 <answer>d</answer>
</answers>
</item>
<item>
<question>what is b?</question>
<answers>
 <answer>a</answer>
 <answer>b</answer>
 <answer>c</answer>
 <answer>d</answer>
</answers>
</item>
<item>
<question>what is c?</question>
<answers>
 <answer>a</answer>
 <answer>b</answer>
 <answer>c</answer>
 <answer>d</answer>
</answers>
</item>
<item>
<question>what is d?</question>
<answers>
 <answer>a</answer>
 <answer>b</answer>
 <answer>c</answer>
 <answer>d</answer>
</answers>
</item>
</exam>

html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function shuffleArray(d){for(var c=d.length-1;c>0;c--){var b=Math.floor(Math.random()*(c+1));var a=d[c];d[c]=d[b];d[b]=a}return d};
function x(a,b,c){ // Url, Callback, just a placeholder
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onload=b;
 c.send()
}
function h(){
 var i=this.responseXML.getElementsByTagName('item'),l=i.length,n=[];
 while(l--){n[l]=l};
 n=shuffleArray(n);
 document.getElementById('question').innerText=i[n[0]].getElementsByTagName('question')[0].textContent;
}
window.onload=function(){
x('exam.xml',h);
}
</script>
</head>
<body>
<div id="question"></div>
</body>
</html>

如果你不明白的东西只是问..

javascript - 通过 javascript 从 XML 中检索值

3 回答 3

Related

Reference