如何使用Ajax通过用户提供的值搜索xml文档

时间:2017-03-20 19:50:42

标签: javascript html ajax xml xslt

我正在处理一个问题,该问题要求我创建一个网页,该网页将返回符合用户请求的XML文件中的信息表。我在让代码返回任何内容时遇到了麻烦!

这是XML的一个示例:

<remake>
        <rtitle>Rebecca of Sunnybrook Farm</rtitle>
        <ryear>1938</ryear>
        <fraction>0.8</fraction>
        <stitle>Rebecca of Sunnybrook Farm</stitle>
        <syear>1917</syear>
    </remake>
    <remake>
        <rtitle>The Three Musketeers</rtitle>
        <ryear>1939</ryear>
        <fraction>0.7</fraction>
        <stitle>The Three Musketeers</stitle>
        <syear>1935</syear>
    </remake>

到目前为止,这是我的代码:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

Title of Remake:
<input type="text" id="rtitleSearch"  autocomplete="off" />
<br> </br>
Year of Remake:
<input type="text" id="ryearSearch" autocomplete="off" />
<br></br>
<button type="button" onclick="parseXML()">Submit</button>
<p id="output"></p>

<script type="text/javascript">
$(document).ready(function(){
    $('#search').on('keyup', function(){
        $.ajax({
            type: "GET",
            url: "remakes.xml",
            dataType: "xml",
            success: parseXML
        });
    });
});
function parseXML(xml){
    var searchFor = $('#rtitleSearch').val();
    var reg = new RegExp(searchFor, "i");
    $(xml).find('remake').each(function(){
        var title = $(this).find('rtitle').text();
        var titleSearch = title.search(reg);
        $('#output').empty();
        if(titleSearch > -1){
            $('#output').append('Found <i>'+searchFor+'</i> in title: '+title.replace(reg, '<b>'+searchFor+'</b>')+'<br />');
        }

    });    
}
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

任何人都可以指出我正确的方向来回应投入吗?

感谢。

1 个答案:

答案 0 :(得分:1)

请查看以下代码:

$(xml).find('remake').each(function(){

请注意,xml XML字符串(不是HTML)。

使用$(string)您可以将一段 HTML 字符串转换为jQuery对象, 但我认为在这种情况下结果将是空的。

也许您应该使用indexOf search xml作为字符串值?

或使用$.parseXML(...)

修改

看看stackoverflow.com/questions/6507293/convert-xml-to-string-with-jquery。它显示了如何将XML字符串转换为“普通”字符串或其他可能的操作。