Question

好的，我已经就以下问题寻求帮助。我有一个包含信息的xml文档，我还有一个脚本，这个脚本为我提供了一个搜索框，如果我搜索xml的ProductName（milk）将获取所有信息。如果我搜索ProductName（anibal）它将为我提供牛奶数据。我想要的是每当搜索所需的ProductName（ex.santos）以显示与其相关的数据时。

我将XML留给脚本。

＆＃13;

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

＆＃13;

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()
    {
        var xmlDoc = loadXMLDoc("filexml.xml");
        var x = xmlDoc.getElementsByTagName("ProductName");
        var input = document.getElementById("input").value;
        var size = input.length;
        if(input == null || input == "")
        {
            document.getElementById("results").innerHTML= "Please enter a Product Name!";
            return false;
        } else
        {
            for (i = 0; i < x.length; i++)
            {

                if (x.length > 0)
                {
                    var date = xmlDoc.getElementsByTagName("Date")[i].childNodes[0].nodeValue;
                    var product = xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
                    var quantity = xmlDoc.getElementsByTagName("Quantity")[i].childNodes[0].nodeValue;
                    var grossprice = xmlDoc.getElementsByTagName("GrossPrice")[i].childNodes[0].nodeValue;
                    var profit = xmlDoc.getElementsByTagName("Profit")[i].childNodes[0].nodeValue;
                    var 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
                {
                    var divText = "<h2>The product does not exist.</h2>";
                }               
            }

            document.getElementById("results").innerHTML = divText;
        }        
    }
</script>

＆＃13;

非常感谢你的帮助！

Answer 1

我修改了你的代码：

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()
{
    var xmlDoc = loadXMLDoc("filexml.xml");
    var x = xmlDoc.getElementsByTagName("entry");
    console.log(x);
    var input = document.getElementById("input").value;
    var size = input.length;
    if(input == null || input == "")
    {
        document.getElementById("results").innerHTML= "Please enter a Product Name!";
        return false;
    } else
    {

        for (var i = 0; i < x.length; i++)
        {
              if (x[i].children[1].textContent == input){
                var root = x[i];
                var date = root.getElementsByTagName("Date")[0].textContent;
                var product = root.getElementsByTagName("ProductName")[0].textContent;
                var quantity = root.getElementsByTagName("Quantity")[0].textContent;
                var grossprice = root.getElementsByTagName("GrossPrice")[0].textContent;
                var profit = root.getElementsByTagName("Profit")[0].textContent;
                var 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
            {
                var divText = "<h2>The product does not exist.</h2>";
            }
        }

        document.getElementById("results").innerHTML = divText;
    }
}
</script>

请注意，因为不推荐使用同步版本，所以应该使用异步回调..

Answer 2

我没有看到您将输入值与实际xml节点值进行比较的位置。尝试

for (i = 0; i < x.length; i++) {
   var product = xmlDoc.getElementsByTagName("ProductName")[i].childNodes[0].nodeValue;
   if(product !== input) continue;
   //have the rest of your code here
}

JavaScript XML搜索 - 搜索时显示错误消息

2 个答案: