在本快速提示中，我将向您展示如何将 XML 文件中的数据加载到空白页上。我们将使用 $.get 函数，并在检索信息时实现加载 gif。我们将展示一个简单的推荐网络开发书籍列表。让我们开始吧。

第一步：检查脚本

首先，让我们看一下简单的 XML 文件。它只包含几本书及其标题、图像和说明。

    info goes here.     info goes here.     info goes here.   

接下来，我们来看看实际的 jQuery。

$(document).ready(function() { $.get('myData.xml', function(d){ $('body').append('
 Recommended Web Development Books 
'); $('body').append('
'); $(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 = '
  
'; html += '
 '; html += '
' + title + '
'; html += '
 ' + description + '
' ; html += '
'; $('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 文件中提取数据的详细内容。更多信息请关注PHP中文网其他相关文章！