快速提示：利用 jQuery 的强大功能从 XML 文件中提取数据-js教程-PHP中文网

快速提示：利用 jQuery 的强大功能从 XML 文件中提取数据

王林

发布： 2023-09-04 18:01:07

原创

1229人浏览过

快速提示：利用 jquery 的强大功能从 xml 文件中提取数据

提客AI提词器

「直播、录课」智能AI提词，搭配抖音直播伴侣、腾讯会议、钉钉、飞书、录课等软件等任意软件。

查看详情

在本快速提示中，我将向您展示如何将 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 文件中提取数据的详细内容，更多请关注php中文网其它相关文章！