使用 jQuery 从 XML 文件中显示数据
Posted
技术标签:
【中文标题】使用 jQuery 从 XML 文件中显示数据【英文标题】：Displaying data from XML file using jQuery 【发布时间】：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 创建此功能？
【问题讨论】：
【参考方案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 并从中创建您的页面结构。
【讨论】：
以上是关于使用 jQuery 从 XML 文件中显示数据的主要内容，如果未能解决你的问题，请参考以下文章
无法从资产路径在 phonegap 项目中使用 jquery 加载 xml 文件