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

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

王林

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

原创

1229人浏览过

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

在本快速提示中，我将向您展示如何将 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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10982">
                            <img src="https://img.php.cn/upload/webcode/000/000/004/176455800251815.jpg" alt="MVM mall 网上购物系统">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10982">MVM mall 网上购物系统</a>
                            <p>采用 php+mysql 数据库方式运行的强大网上商店系统，执行效率高速度快，支持多语言，模板和代码分离，轻松创建属于自己的个性化用户界面 v3.5更新： 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="MVM mall 网上购物系统">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10982" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="MVM mall 网上购物系统">
                        </a>
                    </div>
                ' ;
            html += '</dd>';

            $('dl').append($(html));
            
            $('.loadingPic').fadeOut(1400);
        });
    });
});

登录后复制