Este artículo describe cómo JS lee los datos del archivo XML y muestra datos en el formulario de tabla. Compártelo para su referencia, como sigue:
Veamos primero el archivo XML:
<? xml versión = "1.0" standalone = "yes"?> <estudiante> <stuinfo> <etreado> zhang qiuli </etuname> <stusex> femenino </susex> <stuage> 18 </tuage> </stuinfo> <stuinfo> <stuname> li wencai </stuname> <tusex> <Susex> 31 </tuage> </ stuinfo> <stuinfo> <stuname> li siwen </etuname> <stusex> masculino </ stusex> <stusex> 22 </ stuage> </suinfo> <stuinfo> </stuinfo> <stuinfo> <Stuname> Sun Honglei </etename> <stusex> masculino </stusex> <stuage> 32 </stuage> </stuinfo> <stuinfo> </stuinfo> <stuinfo> <stuname> Jiang Lin </etame> <stusex> femenino </stusex> <stusex> femenino </ stusex> <stusex> 23 </stuage> </ stuinfo> <stuinfo> <siaxiaoo </suname> <stusex> femenino </stuinfo> <stusex> femenino </stusex> <stuage> 22 </tuage> </ stuinfo> </deraus>
Código de página ASPX:
< %@ Page lenguaje = "c#" autoeventwireUp = "true" codeHind = "Obtener datos de la base de datos para generar xml.aspx.cs" heredes = "Capítulo1.get Data de base de datos para generar XML" %> < "http://www.w3.org/tr/XHtml1/dtd/xhtml1-tranSicional.dtd"><html xmlns =" http://www.w.w3.org/19999/xhtml loadxmldoc (dname) {if (window.xmlhttprequest) {xhttp = new xmlhttprequest (); } else {xhttp = new ActiveXObject ("Microsoft.xmlhttp"); } xhttp.open ("get", dname, falso); xhttp.send (""); return xhttp.Responsexml; } function readXml () {var xmlDoc = loadxmlDoc ("student.xml"); // Obtenga el nodo especificado var divmsg = document.getElementById ("xmlmsg"); var msg = "<table border = '1' id = 'mytable'> <tr> <th> name </th> <th> género </th> <th> edad </th> <tr>"; var nodos = xmldoc.getElementsBytagName ("stuinfo"); for (var i = 0; i <nodo.length; i ++) {msg+= "<tr>"; msg + = "<td>" + nodos [i] .getElementsByTagName ("STUNAME") [0] .FirstChild.NodeValue + "</td>"; msg + = "<td>" + nodos [i] .getElementsByTagName ("stusex") [0] .firstchild.nodeValue + "</td>"; msg + = "<td>" + nodos [i] .getElementsByTagName ("Stuage") [0] .FirstChild.NodeValue + "</td>"; msg += "</tr>"; } msg += "</table>"; divmsg.innerhtml = msg; } </script> </head> <body> <form id = "form1" runat = "servidor"> <div> <input type = "button" value = "js read xml" onClick = "readxml ()"/> <br/> <div id = "xmlmsg"> </div> </div> </form> </body> </html>La operación JS anterior evita principalmente el uso de nodos infantiles (porque los nodos infantiles [0] a veces aparecen en Firefox y obtienen "/N" en lugar del primer nodo infantil que queremos. Puede probar esto yo mismo, pero de todos modos encontré esta situación), haciéndolo compatible con IE y Firefox. No he probado otros navegadores.
Para obtener más información sobre JavaScript, consulte los temas especiales de este sitio: "Resumen de las habilidades de operación de archivo XML de JavaScript", "Resumen de las habilidades de operación de AJAX en JavaScript", "Resumen de habilidades de operación JSON en JavaScript", "Resumen de JavaScript Switching Effects and Techniques", "," Summary of JavaScript Búsqueda de algorithm ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",". ",", ",", ",", ",", ",", ",", ",", ",", ",", "," De los Summary de los Summary de JavaScript. "," Técnicas "," Resumen de los errores de JavaScript y las técnicas de depuración "," Resumen de las estructuras de datos de JavaScript y las técnicas de algoritmo "," Resumen de algoritmos y técnicas transversales de JavaScript ", y" Resumen del uso de operaciones matemáticas de JavaScript ".
Espero que este artículo sea útil para la programación de JavaScript de todos.