使用 jQuery 从 XML 文件中显示数据答案

【问题标题】：Displaying data from XML file using jQuery使用 jQuery 从 XML 文件中显示数据
【发布时间】：2011-10-20 19:26:54
【问题描述】：

我有以下 XML 文件，其中包含 A - B - C - D - 等格式的字母和单词定义……

<container>
    <data name="apple" definition="A sweet fruit. bla bla bla"/>
    <data name="bat" definition="bla bla bla"/>
    <data name="book" definition="bla bla bla"/>
    <data name="cat" definition="bla bla bla"/>
    <data name="cup" definition="bla bla bla"/>
</container>

如果我点击B，它应该会在一个框中加载bat 和book。如果我点击 book 它应该在右侧区域显示相关定义。如何使用 jQuery 创建此功能？

【问题讨论】：

标签： html jquery-ui jquery jquery-selectors

【解决方案1】：

如果你的 HTML 是这样的：

<div class="search" data-letter="a">A</div>
<div class="search" data-letter="b">B</div>
<div class="search" data-letter="c">C</div>
<div class="search" data-letter="d">D</div>
<div id="results"></div>

然后是javascript：

$(function(){

    var xml_data;

    // Load the XML
    $.get("your_xml_file.xml", function(data){

        xml_data = $(data);

        // On click of search buttons
        $(".search").bind("click", function(){

            // Clear the results div
            $("#results").html("");

            // Get the desired letter
            var letter = $(this).data("letter");

            // Loop through each result which has name attribute beginning with letter
            xml_data.find("data[name^='"+letter+"']").each(function(k, v){

                // Append definition to results
                $("#results").append($(this).attr("definition") + "<br/>");
            });

        });

    });

});

这应该可以满足您的要求。

【讨论】：

【解决方案2】：

如果您从字符串加载 XML：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        ul ul, span {
            display:none;
        }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var xml = '<container><data name="apple" definition="A sweet fruit. bla bla bla"/><data name="bat" definition="bla bla bla"/><data name="book" definition="bla bla bla"/><data name="cat" definition="bla bla bla"/><data name="cup" definition="bla bla bla"/></container>';
            var xmlDoc = $.parseXML(xml);
            var $xml = $(xmlDoc).find('container');
            var letters = new Object();

            // loop through all the definitions
            $xml.children().each(function(k, v) {
                var letter = $(v).attr('name').charAt(0);

                // only add letters not already added
                if (!letters[letter]) {
                    $('#definitions')
                        .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>');
                    letters[letter] = 'f';
                }

                // append definitions
                $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>');
            });

            // bind click events on the letters to show/hide the words
            $('#definitions li > a').click(function() {
                $(this).next('ul').toggle();
                return false;
            });

            // bind click events on the words to show/hide the definitions
            $('#definitions ul li a').click(function() {
                $(this).next('span').toggle();
                return false;
            });
        });
    </script>
</head>
<body>
    <h1>Defintions</h1>
    <ul id="definitions"></ul>
</body>
</html>

或者如果您通过 AJAX 加载，请将 JavaScript 替换为：

$(function() {
    var $xml;
    var letters = new Object();

    if ($xml == null) {
        $.ajax({
            url : 'definitions.xml',
            dataType : 'xml',
            success : function (xml) {
                $xml = $(xml).find('container');
                console.log($xml);
                $xml.children().each(function(k, v) {
                    var letter = $(v).attr('name').charAt(0).toUpperCase();

                    // only add letters not already added
                    if (!letters[letter]) {
                        $('#definitions')
                            .append('<li><a href="#" id="' + letter + '">' + letter + '</a><ul></ul></li>');
                        letters[letter] = '.'; // store this key in the map (no actual value)
                    }

                    // append definitions
                    $('#definitions a#' + letter + ' + ul').append('<li><a href="#">' + $(v).attr('name') + '</a><span> - ' + $(v).attr('definition') + '</span></li>');
                });

                // bind click events on the letters to show/hide the words
                $('#definitions li > a').click(function() {
                    $(this).next('ul').toggle();
                    return false;
                });

                // bind click events on the words to show/hide the definitions
                $('#definitions ul li a').click(function() {
                    $(this).next('span').toggle();
                    return false;
                });
            }
        });
    }
});

请注意，这可能不是大型 XML 文件的最佳解决方案；在呈现页面之前，浏览器必须先传输整个文件。因此，您可能需要研究另一种解决方案，可能在页面上创建一个a-z 列表，然后在用户单击字母时动态加载单词。因此，只有相关和必要的单词和定义才会按需传输。您还可以缓存它以避免对相同定义的重复请求。

【讨论】：

【解决方案3】：

jquery 能够使用 XML。您可能需要使用 each 函数来遍历您的 XML 并从中创建您的页面结构。

【讨论】：