簡體   English   中英

將Xml文件鏈接到HTML

[英]Link Xml file to HTML

我已經創建了一個簡單的xml文件和一個html文件來顯示xml文件的詳細信息,但是它在同一文件夾中無法正常工作。

這是我的xml文件:

student.xml

        <?xml version="1.0" encoding="utf-8"?>
<Student>
<Name>Student</Name>
<Gender>Boy</Gender>
<City>Mumbai</City>
<PhoneNumbers>42607700, 42607701</PhoneNumbers>
<Email>student@aurus.com</Email>
</Student>

HTML文件:

studentDetails.html

    <!DOCTYPE html>
<html>
<head>
<script src="loadxmldoc.js"></script>
</head>
<body>

<script>
xmlDoc=loadXMLDoc("student.xml");

x=xmlDoc.getElementsByTagName("Student");

for (i=0;i<x.length;i++)
  { 
  document.write(x[i].childNodes[0].nodeValue);
  document.write("<br>");
  }
</script>
</body>
</html>

和Javascript文件:

loadXMLDoc.js

    function loadXMLDoc(student)
{

if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // code for IE5 and IE6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

 xhttp.open("GET",student,false);
xhttp.send();
return xhttp.responseXML;
}

請幫助

我為您編寫了一個示例,該示例在Firefox中運行良好,但在Chrome中卻無法運行。 我認為這是因為您正在本地請求xml文件。 那應該通過服務器。

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse:collapse;
}
th, td {
    padding: 5px;
}
</style>
</head>
<body>

<script>
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","students.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<table><tr><th>Students</th><th>Age</th></tr>");
var x=xmlDoc.getElementsByTagName("student");
for (i=0;i<x.length;i++)
  { 
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("age")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
  }
document.write("</table>");
</script>

</body>
</html>

students.xml

<?xml version="1.0" encoding="utf-8"?>
<STUDENTS>
    <student>
        <name>Hanzallah</name>
        <age>20</age>
        <exp>Everything</exp>
    </student>
    <student>
        <name>Afgan</name>
        <age>22</age>
        <exp>Nothing</exp>
    </student>
</STUDENTS>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM