如何从XML文件中提取数据并在html表上显示它

这里是我的代码（从旧帖子中获得）。我做错了什么？如何从XML文件中提取数据并在html表上显示它

1.第一个test.xml，一个用于存储数据的xml文件。

<?xml version="1.0"?> 
<item> 
    <entry> 
     <Date>1/01/2001</Date> 
     <ProductName>milk</ProductName> 
     <Quantity>10</Quantitty> 
     <GrossPrice>50</GrossPrice> 
     <Profit>10</Profit> 
     </entry> 
     <entry> 
     <Date>2/10/2007</Date> 
     <ProductName>milk</ProductName> 
     <Quantity>20</Quantitty> 
     <GrossPrice>100</GrossPrice> 
     <Profit>20</Profit> 
     </entry> 
</item>

2.第二个是demo.html，用于显示存储在xml文件中的数据。这个html有一个输入标签作为文本和一个提交按钮。点击提交按钮，它应该搜索给定的输入并显示输出。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
</head> 
<body> 
    Product Name: <input type="text" name="ProductName" id="input"> 
    <br /> 
    <input type="submit" value="Submit" onClick="searchXML()"> 
    <br /> 
    <br /> 
    <div id="results"> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script language="JavaScript" type="text/javascript"> 
     function loadXMLDoc(dname) 
     { 
      if (window.XMLHttpRequest) 
      { 
       xhttp=new XMLHttpRequest(); 
      } 
      else 
      { 
       xhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      xhttp.open("GET",dname,false); 
      xhttp.send(); 
      return xhttp.responseXML; 
     } 
     function searchXML() 
     { 
      xmlDoc=loadXMLDoc("test.xml"); 
      x=xmlDoc.getElementsByTagName("ProductName"); 
      input = document.getElementById("input").value; 
      size = input.length; 
      if (input == null || input == "") 
      { 
       document.getElementById("results").innerHTML= "Please enter a Product Name!"; 
       return false; 
      } 
      for (i=0;i<x.length;i++) 
      { 
       startString = ProductName.substring(0,size); 
       if (startString.toLowerCase() == input.toLowerCase()) 
       { 
        date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue; 
        product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue; 
        quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue; 
        grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue; 
        profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue; 
        divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>" + "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td></tr>" + "</table>"; 
        break; 
       } 
       else 
       { 
        divText = "<h2>The product does not exist.</h2>"; 
       } 
      } 
      document.getElementById("results").innerHTML= divText; 
     } 
    </script> 
</body> 
</html>

我对铬为得到一个错误---

的XMLHttpRequest无法加载文件：/// C：/Users/chandan/Desktop/demo/test/test.xml。只有协议方案支持跨源请求：http，data，chrome-extension，https，chrome-extension-resource。 demoNew.html：28 Uncaught NetworkError：未能在'XMLHttpRequest'上执行'send'：未能加载'file：/// C：/Users/chandan/Desktop/demo/test/test.xml'。

然而，当我在Firefox上运行此它在加载XML文件，但没有显示输出，HTML的线44给错误..

如何解决？

来源

2014-12-13 kuljit k

请小提琴，以便其他能帮助这里http://jsfiddle.net/ – sking 2014-12-13 11:23:25

您试图访问本地文件，并且大多数浏览器（例如最近的Chrome）默认情况下禁用它。清洁和HTML5友好的方式来做到这一点是通过一个对话框和FileAPI

http://www.html5rocks.com/en/tutorials/file/dndfiles/

这里是执行你的任务一个例子：一个对话框，让你选择XML文件，并显示信息如你所愿。

我的主要来源，这是一个： https://github.com/MounirMesselmeni/html-fileapi

这里是如何适应代码

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>HTML5 File API</title> 
</head> 
<body > 
    <div> 
    <form class="form-horizontal well"> 
     <legend> 
     <h3> 
      <div id="title">HTML5 File API</div> 
     </h3> 
     </legend> 
     <fieldset> 
      <label for="xmlFileinput"> <strong>XML File:</strong> 
      </label> 
      <input type="file" id="xmlFileinput" onchange="handleFiles(this.files)" 
      accept=".xml"> 
     </div> 
     </fieldset> 
     Product Name: <input type="text" name="ProductName" id="input">  
    </form> 
    <div id="output"> 
    </div> 
    <div id="results"> 
    </div>  
    </div> 
    <br> 
    <br> 
    <footer> 
    <center> 
     <p>&copy; Gabriel Ter-Minassian + Mounir Messelmeni 2012</p> 
    </center> 
    </footer> 

    <script type="text/javascript"> 
     function handleFiles(files) { 
     // Check for the various File API support. 
     if (window.FileReader) { 
      // FileReader are supported. 
      getAsText(files[0]); 
     } else { 
      alert('FileReader are not supported in this browser.'); 
     } 
     } 

     function getAsText(fileToRead) { 
     var reader = new FileReader(); 
     // Handle errors load 
     reader.onload = loadHandler; 
     reader.onerror = errorHandler; 
     // Read file into memory as UTF-8  
     reader.readAsText(fileToRead); 
     } 

     function loadHandler(event) { 
     var xml = event.target.result; 
     //alert(xml); 
     doc=StringtoXML(xml); 
     searchXML(doc);   
     } 


     function errorHandler(evt) { 
     if(evt.target.error.name == "NotReadableError") { 
      alert("Canno't read file !"); 
     } 
     } 

     function StringtoXML(text){ 
      if (window.ActiveXObject){ 
      var doc=new ActiveXObject('Microsoft.XMLDOM'); 
      doc.async='false'; 
      doc.loadXML(text); 
      } else { 
      var parser=new DOMParser(); 
      var doc=parser.parseFromString(text,'text/xml'); 
      } 
      return doc; 
     } 

     function searchXML(xmlDoc) 
     { 
      x=xmlDoc.getElementsByTagName("ProductName"); 
      input = document.getElementById("input").value; 
      size = input.length; 
      divText="" 
      if (input == null || input == "") 
      { 
       document.getElementById("results").innerHTML= "Please enter a Product Name!"; 
       return false; 
      } 
      for (i=0;i<x.length;i++) 
      { 
       startString = x[i].childNodes[0].nodeValue; 
       if (startString.toLowerCase() == input.toLowerCase()) 
       { 
        date=xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue; 
        product=xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue; 
        quantity=xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue; 
        grossprice=xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue; 
        profit=xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue; 
        if (divText==="") 
        { 
        divText="<h1>The contact details are:</h1><br /><table border=1>"; 
        divText+="<tr><th>Date</th><th>Product</th><th>Quantity</th><th>Gross Price</th><th>Profit</th></tr>"; 
        } 
        divText += "<tr><td>" + date + "</td><td>" + product + "</td><td>" + quantity + "</td><td>" + grossprice + "</td><td>" + profit + "</td>"+"</tr>"; 
       } 
      } 
      if (divText=="") 
      { 
       divText = "<h2>The product does not exist.</h2>";    
      } 
      else 
      { 
       divText+="</table>"; 
      } 
      document.getElementById("results").innerHTML= divText; 
     }  

    </script> 
</body> 
</html>

Example with milk: 2 entries 希望帮助，

来源

2014-12-13 14:05:39 Gabriel

什么是避免这种最好的方法...因为我无法 - 允许文件访问？ – 2014-12-13 18:09:43

我不想显示文件的所有条目。在我的html中有一个搜索框，它应该只显示搜索到的内容... – 2014-12-14 06:14:26

谢谢，它确实有帮助。但仍然没有显示我搜索的产品 – 2014-12-16 14:21:03

如何从XML文件中提取数据并在html表上显示它

回答

相关问题