堆棧內存溢出
  簡體   English   中英

如何從am XML文件中提取數據並在html表中顯示它

[英]how to pull data from am XML file and show it on html table

 原文  2014-12-13 10:52:08  3   1    javascript/ jquery/ html/ xml

問題描述

這是我的代碼（取自舊帖子）。 我做錯了什么？

1.First one 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>

我在chrome上遇到錯誤---

XMLHttpRequest無法加載file：/// C：/Users/chandan/Desktop/demo/test/test.xml。 交叉源請求僅支持協議方案：http，數據，chrome擴展，https，chrome-extension-resource。 demoNew.html：28 Uncaught NetworkError：無法在'XMLHttpRequest'上執行'send'：無法加載'file：/// C：/Users/chandan/Desktop/demo/test/test.xml'。

但是當我在firefox上運行它時，它正在加載xml文件，但沒有顯示輸出，在Html的第44行給出了錯誤。

怎么修？

1 個解決方案

解決方案1
 2 已采納  2014-12-13 14:05:39

您正嘗試訪問本地文件，並且大多數瀏覽器（例如最近的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>

牛奶示例：2個條目 希望有所幫助，

暫無
暫無

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

相關問題 從xml文件中提取數據？ 如何將數據從 XML 文件導入 HTML 表格 在HTML表中顯示XML文件 如何從CSV文件中提取數據並用它填充HTML表？ 從XML或HTML文件中提取addContentHTML內容 使用javascript從html表中提取數據 使用JQuery從HTML表中提取數據 如何使用PHP從XML文件加載數據，以使用javascript在html頁面中顯示它 如何將 API 響應數據拉入 HTML 表 如何使用純JavaScript將XML文件中的數據解析為HTML表？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM