在本快速提示中,我将向您展示如何将 xml 文件中的数据加载到空白页上。我们将使用 $.get 函数,并在检索信息时实现加载 gif。我们将展示一个简单的推荐网络开发书籍列表。让我们开始吧。
第一步:检查脚本首先,让我们看一下简单的 xml 文件。它只包含几本书及其标题、图像和说明。
<?xml version=1.0 encoding=utf-8 ?><books> <book title=css mastery imageurl=images/css.jpg> <description> info goes here. </description> </book> <book title=professional asp.net imageurl=images/asp.jpg> <description> info goes here. </description> </book> <book title=learning jquery imageurl=images/lj.jpg> <description> info goes here. </description> </book></books>
接下来,我们来看看实际的 jquery。
$(document).ready(function() { $.get('mydata.xml', function(d){ $('body').append('<h1> recommended web development books </h1>'); $('body').append('<dl />'); $(d).find('book').each(function(){ var $book = $(this); var title = $book.attr(title); var description = $book.find('description').text(); var imageurl = $book.attr('imageurl'); var html = '<dt> <img class=bookimage alt= src=' + imageurl + ' /> </dt>'; html += '<dd> <span class=loadingpic alt=loading />'; html += '<p class=title>' + title + '</p>'; html += '<p> ' + description + '</p>' ; html += '</dd>'; $('dl').append($(html)); $('.loadingpic').fadeout(1400); }); });});
第二步:破译时间因为这是一个快速提示,所以我会比平时更快地运行该脚本。当文档准备好进行操作时,我们将使用“$.get”函数获取 xml 文件。在括号中,我们将传入文件的位置,然后运行回调函数。我将使用变量“d”来表示从 xml 文件中提取的信息。接下来,我们将创建一个标题标签和一个定义列表。
继续,我们将搜索 xml 文件 (d) 并找到标题为“book”的标签。回头看看我的文档,一共有三本书。因此,我们需要运行“each”方法才能对每本书执行操作。 请记住,“each”就像“for”语句一样。这是一种遍历包装集中每个元素的方法。
在下一个代码块中,我定义了一些变量。为了从 xml 文件中获取“标题”和“描述”,我们使用“.attr(value)”——其中“值”等于标记内的属性。
最后,我们创建一个名为“html”的变量,它将包含显示 xml 文件中信息的 html。但是,仅将该信息分配给变量不会将其显示在页面上。要将其添加到页面,我们获取定义列表并附加变量。 - $('dl').append($(html));
还有一件事值得一提,当从 xml 文件中检索信息时,我们将显示一个标准的加载 gif(通过背景图像)。数据加载后,我们将抓取图像并将其淡出。
你完成了我知道我很快就经历了这一切;因此,请随意发表评论并提出您可能有的任何问题。 应该注意的是,这个脚本在为现实世界的网站做好准备之前需要做更多的工作。你必须补偿那些关闭了 javascript 的人。在这种情况下,如果他们确实将其关闭,他们将盯着一张空白页。你必须补偿这些事情。但是,我离题了。
以上就是快速提示:利用 jquery 的强大功能从 xml 文件中提取数据的详细内容。