Javascript 加载本地xml文件并显示在html5页面中_Javascript_Html

Javascript 加载本地xml文件并显示在html5页面中

javascript html

Javascript 加载本地xml文件并显示在html5页面中,javascript,html,Javascript,Html,我需要将一个本地xml文件（即：c:\temp\sample.xml）加载到本地html5页面并显示结果变量这是sample.xml <?xml version="1.0" encoding="UTF-8"?> <fe:Invoice> <cbc:ProfileID>1.0</cbc:ProfileID> <cbc:ID>FV341375</cbc:ID> <fe:AccountingCust

我需要将一个本地xml文件（即：c:\temp\sample.xml）加载到本地html5页面并显示结果变量

这是sample.xml

<?xml version="1.0" encoding="UTF-8"?>
<fe:Invoice>
    <cbc:ProfileID>1.0</cbc:ProfileID>
    <cbc:ID>FV341375</cbc:ID>
    <fe:AccountingCustomerParty>
        <cbc:AdditionalAccountID>2</cbc:AdditionalAccountID>
        <fe:Party>
            <fe:Person>
                <cbc:FirstName>Andres</cbc:FirstName>
            </fe:Person>
        </fe:Party>
    </fe:AccountingCustomerParty>
    <fe:InvoiceLine>
        <cbc:ID>1102347224825331</cbc:ID>
        <cbc:InvoicedQuantity>1</cbc:InvoicedQuantity>
        <fe:Item>
            <cbc:Description>Item Description</cbc:Description>
        </fe:Item>
        <fe:Price>
            <cbc:PriceAmount currencyID="COP">65000.00</cbc:PriceAmount>
        </fe:Price>
    </fe:InvoiceLine>
</fe:Invoice>


1
FV341375
2.
安德烈斯
1102347224825331
1.
项目说明
65000

我需要打印以下各项的值：

fe:发票->cbc:ID
fe:invoice->fe:AccountingCustomerParty->fe:Party->fe:Person->cbc:FirstName
fe:发票->fe:发票行->fe:项目->cbc:说明
fe:发票->fe:发票行->fe:价格->cbc:价格金额

我的html5页面上的结果必须是这样的：

因沃西Id:FV341375

名字：安德烈斯

说明：项目说明

价格：65000.00

如何使用javascript实现这一点

谢谢

您可以执行XMLHttpRequest，也称为AJAX。更多地讨论它，并鼓励使用AJAX框架来解决“互操作性问题”

下面是它的样子

var client = new XMLHttpRequest();
client.open('GET', 'c:\temp\sample.xml');
client.onreadystatechange = function() {
   var response = client.responseText,
       parser = new DOMParser(),
       xmlDoc = parser.parseFromString(response,"text/xml");

   //use the xml Doc however you want.
}
client.send();

更多信息：

您可以执行XMLHttpRequest，也称为AJAX。更多地讨论它，并鼓励使用AJAX框架来解决“互操作性问题”

下面是它的样子

var client = new XMLHttpRequest();
client.open('GET', 'c:\temp\sample.xml');
client.onreadystatechange = function() {
   var response = client.responseText,
       parser = new DOMParser(),
       xmlDoc = parser.parseFromString(response,"text/xml");

   //use the xml Doc however you want.
}
client.send();

更多信息：

尽管这个问题没有按照指南提交，而且太具体，我还是会回答的

步骤：

从磁盘加载文件

显示文件结构

解析文件

显示结果

实施：

HTML:

函数readSingleFile（e）{
var file=e.target.files[0]；
如果（！文件）{
回来
}
var reader=new FileReader（）；
reader.onload=函数（e）{
var内容=e.target.result；
显示内容（contents）；
};
reader.readAsText（文件）；
}
函数displayContents（目录）{
var元素=document.getElementById（'file-content'）；
element.textContent=内容；
解析（内容）；
}
document.getElementById（'file-input'）
.addEventListener（'change'，readSingleFile，false）；
var-xmlDoc；
函数解析（内容）
{
//创建解析器
var parser=新的DOMParser（）；
xmlDoc=parser.parseFromString（内容，“text/xml”）；
//解析！
document.getElementById（“ID”）.innerText=“ID:”+xmlDoc.evaluate（“//ID”，xmlDoc.iterateText（）.textContent；
document.getElementById（“FirstName”）.innerText=“First Name:”+xmlDoc.evaluate（“//FirstName”，xmlDoc.iterateNext（）.textContent；
document.getElementById（“Description”）.innerText=“Description:”+xmlDoc.evaluate（//Description），xmlDoc.iterateText（）.textContent；
document.getElementById（“PriceAmount”）.innerText=“Price:”+xmlDoc.evaluate（“//PriceAmount”，xmlDoc.iterateText（）.textContent；
}


文件内容：
身份证件：
名字：
说明：
价格：