使用JavaScript显示特定的XML数据
Display specific XML data using JavaScript
Stack Overflow 的朋友们好
我可以从XML文件中获取特定的数据,但我有一个问题。只有当章节id为1或2时,我才能获得"分章"数据?
这是我的XML代码:
<?xml version="1.0" encoding="utf-8" ?>
<chapters module="TALLER DE COMPROMISO ORGANIZACIONAL" img="fondoprincipal.jpg">
<chapter id="1" title="Presentación Curso" img="img_chapter4.jpg" frase="">
<subchapter id="1" title="Bienvenidos">
<pag id="1" img="logoeconomia2.jpg" />
</subchapter>
<subchapter id="2" title="Instrucciones para ingresar al Taller">
<pag id="1" img="instrucciones.jpg"/>
</subchapter>
<subchapter id="3" title="Instrucciones para estudiar este Taller">
<pag id="1" img="instrucciones-3.jpg"/>
<pag id="2" img="instrucciones-2.jpg"/>
<pag id="3" img="foro.jpg"/>
</subchapter>
<subchapter id="4" title="Controles del curso">
<pag id="1" img="controles.jpg" />
</subchapter>
<subchapter id="5" title="Tutorías del Taller">
<pag id="1" img="e-learning.jpg"/>
</subchapter>
<subchapter id="6" title="Programación del Taller">
<pag id="1" img="calendario.jpg"/>
</subchapter>
<subchapter id="7" title="Descripción del Taller">
<pag id="1" img="descripcioncurso.jpg"/>
</subchapter>
<subchapter id="8" title="Objetivo General del Taller">
<pag id="1" img="objetivo_general.jpg"/>
</subchapter>
</chapter>
<chapter id="2" title="El Compromiso Organizacional" img="img_chapter3.jpg" frase="“Cuando alguien ama lo que hace se nota.
Cuando no amas lo que haces, se nota aún más”
Steve Jobs">
<subchapter id="1" title="Objetivos de Aprendizaje" >
<pag id="1" img="objetivo_c1.jpg"/>
</subchapter>
<subchapter id="2" title="Aportes del Funcionario a la Misión Institucional" >
<pag id="1" img="generacion_valor_1.jpg"/>
</subchapter>
<subchapter id="3" title="Expresiones del Compromiso Organizacional">
<pag id="1" img="responsabilidad_1.jpg"/>
</subchapter>
<subchapter id="4" title="Compromiso Organizacional y Servicio Público" >
<pag id="1" img="comp_sp_1.jpg"/>
<pag id="2" img="comp_sp_2.swf"/>
<pag id="3" img="comp_sp_3.jpg"/>
</subchapter>
<subchapter id="5" title="Bases del Compromiso Organizacional" >
<pag id="1" img="Base_Comp.swf"/>
</subchapter>
</chapter>
</chapters>
这是我的JavaScript代码,包含在一个PHP文件中。有了这段代码,我可以解析特定的数据,在这种情况下,我可以从章节中获得"img"answers"title"属性,但如果章节的id是"1"或"2",我就无法获得分章数据。
<script>
var ruta = '<?php echo "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]; ?>';
camino = ruta.replace("chapter.php", "data/chapter.xml");
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open("GET", camino, true);
xhttp.send();
function myFunction(xml) {
var x, y, i, xmlDoc, txt, id_capitulo;
xmlDoc = xml.responseXML;
id_capitulo = <?php echo $id_capitulo; ?>;
txt_img = "";
txt_id = "";
txt_2 = "";
y = xmlDoc.getElementsByTagName('capitulo');
for (i = 0; i < y.length; i++) {
txt_id = y[i].getAttribute('id');
if(txt_id == id_capitulo){
txt_img = y[i].getAttribute('img');
img = ruta.replace("chapter.php", "images/"+txt_img);
document.getElementById("imagen_cap").innerHTML = '<img src="'+img+'" style="max-width:100%; width: 100%;" />';
txt_2 += y[i].getAttribute('titulo');
if(txt_id != 1){
document.getElementById("titulo_barra").innerHTML = 'Capítulo '+(txt_id - 1)+' - '+txt_2;
document.getElementById("presentacion_cap").innerHTML = txt_2+'<br><br><i class="fa fa-arrow-right boton_principio" id="boton_inicio_curso" style="font-size: 1em;" onclick="inicia_subcapitulo('+txt_id+'); return false;"></i>';
}
else{
document.getElementById("titulo_barra").innerHTML = txt_2;
document.getElementById("presentacion_cap").innerHTML = txt_2+'<br><br><i class="fa fa-arrow-right boton_principio" id="boton_inicio_curso" style="font-size: 1em;" onclick="inicia_subcapitulo('+txt_id+'); return false;"></i>';
}
}
}
}
</script>
谢谢大家并致以问候。
朋友们,我找到了解决问题的方法。
我刚刚将这个JS代码添加到我的原始JavaScript中,如果章节有一个确定的id,我可以检索子章节属性数据。
titulo_sub="";
z = xmlDoc.getElementsByTagName('chapter')[id_capitulo - 1].childNodes;
cont = 1;
for (j = 0; j < z.length; j++) {
impar = j % 2;
if(impar == 1){
a = z[j].attributes;
titulo_sub += cont +'. '+ a.getNamedItem("title").nodeValue.toString() + '<br>';
cont = cont + 1;
}
}
document.getElementById("menu_cap").innerHTML = titulo_sub;
致以亲切的问候,祝你今天愉快。
相关文章:
- 带有显示XML数据的HTML的空白页
- 使用AJAX传递的数据编辑XML文件-正在删除XML数据
- 缩略图库的XML数据图像绑定
- 如何在Javascript中通过POST请求发送XML数据
- jQuery使用XML数据更新UL列表
- 将 XML 数据转换为 json 格式 AngularJS
- 如何在javascript(ajax)中使用嵌入HTML中的XML数据
- 使用JSONPjquery获取HTML格式的XML数据
- 将普通数据转换为xml数据的图像滑块
- 如何从加载到javascript中的导出XML数据中删除不需要的空格
- 使用Javascript在Html中将Xml数据或Json对象预览为Xml树
- 使用IE9更新XML数据孤岛
- 嵌套的XML数据和ExtJS模型关联
- 从javascript向Ashx处理程序发送xml数据,并在新窗口中显示响应
- 在jQuery中按日期对xml数据进行排序
- 使用XML数据在浏览器中使用数学
- 如何在 JQuery 中按日期对 xml 数据进行排序
- JSON / JQUERY - ajax post,如何在成功函数中处理 XML 数据
- 使用 JavaScript 显示和隐藏 PHP 回显的 XML 数据
- 使用 JavaScript 显示 XML 数据,在函数结束时出现问题