Question

这是我的代码（取自旧帖子）。我做错了什么？

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>

我在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行给出了错误..

如何解决？

Answer 1

您正在尝试访问本地文件，并且大多数浏览器（例如最近的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 希望有所帮助，

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

1 个答案: