这是我的代码(取自旧帖子)。我做错了什么？
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。跨源请求仅支持以下协议(protocol)方案:http、data、chrome-extension、https、chrome-extension-resource。 demoNew.html:28 未捕获的网络错误:无法在“XMLHttpRequest”上执行“发送”:无法加载“file:///C:/Users/chandan/Desktop/demo/test/test.xml”。
然而，当我在 firefox 上运行它时，它正在加载 xml 文件，但没有显示输出，在 Html.. 的第 44 行给出错误。
如何修复？
最佳答案
您正在尝试访问本地文件，而大多数浏览器(例如最新的 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>© 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>
希望对您有所帮助，
关于javascript - 如何从 am XML 文件中提取数据并将其显示在 html 表上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27458019/