通过 javascript 从 XML 中检索值 [英] Retrieve Value from XML through javascript

查看：30
本文介绍了通过 javascript 从 XML 中检索值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

<考试><站点范围><q1>什么是sitescope 1</q1><q1a1>1</q1a1><q1a2>2</q1a2><q1a3>3</q1a3><q1a4>4</q1a4><q1ans>1</q1ans><q2>什么是sitescope 1</q2><q2a1>1</q2a1><q2a2>2</q2a2><q2a3>3</q2a3><q2a4>4</q2a4><q2ans>1</q2ans><q3>什么是sitescope 1</q3><q3a1>1</q3a1><q3a2>2</q3a2><q3a3>3</q3a3><q3a4>4</q3a4><q3ans>1</q3ans></sitescope>

这是我使用的 HTML 页面:

<script type="text/javascript">功能问题(){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;<表格><div><div><div style="float: left;"id="qstn1"></div><div id="q1"></div>

<br><div><input type="radio" name="1" style="float: left;"><div id="q1a1"></div>

<br><div><input type="radio" name="1" style="float: left;"><div id="q1a2"></div>

<br><div><input type="radio" name="1" style="float: left;"><div id="q1a3"></div>

<br><div><input type="radio" name="1" style="float: left;"><div id="q1a4"></div>

</表单>

解决方案

这是一个完全可用的 json 方式代码

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

  1. 随机播放功能
  2. 缓存问题
  3. 存储答案
  4. 添加和删除不必要的事件处理程序.
  5. 打印结果
  6. 使用文档片段
  7. 无限问题
  8. 无限答案
  9. 与外部库兼容
  10. 并且引用都是在加载时定义的

<小时>

<头><meta charset="utf-8"><title>测验</title><脚本>(功能(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}返回 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()}功能下一个(){var a=q[当前];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);answer.innerHTML='';答案.appendChild(f);当前++；}函数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<身体><div id="问题"></div><div id="答案"></div><button id="btn">OK</button></html>

json

<预><代码>[{"问题":"什么是?","答案":["a","b","c","d"]},{"问题":"b 是什么?","答案":["a","b","c","d"]},{"问题":"c 是什么?","答案":["a","b","c","d"]}]

I have a XML with 3 questions 4 options each and answer. I would like to have one question to be selected in random and display it in the html div tag. Please help in doing this.

I;m getting the object instead of the value in the xml node.

<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>

This is the HTML page im using:

<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>

解决方案

Here is a FULLY working code for the json way

which stores the answers into an array and prints them at the end.

  1. shuffle function
  2. caches the questions
  3. stores the answers
  4. adds and removes the unnecessary eventhandlers.
  5. prints out the result
  6. uses document fragment
  7. infinite questions
  8. infinite answers
  9. compatible with external libraries
  10. and the references are all defined on load

<!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"]
 }
]

这篇关于通过 javascript 从 XML 中检索值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆