利用JQuery的load函数动态加载其它页面的内容的实现代码

利用jQuery的load()函数可以动态的加载其他页面的内容，具体步骤如下：

引入jQuery库
在页面中引入jQuery库文件，可以通过CDN或者本地文件引入，如下所示：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

使用load()函数
采用jQuery的load()函数来加载内容，该函数接受两个参数，第一个参数为要加载的页面的URL地址，第二个参数为加载完成后的回调函数。如下所示：

$("#content").load("page.html", function() {
    console.log("页面加载完成");
});

上述代码加载了page.html页面，加载完成后调用回调函数输出“页面加载完成”字样，并将page.html页面的内容渲染到ID为content的元素中。

处理加载时的等待提示
当加载某个页面时，我们可能需要在页面上显示一个等待提示，这时可以在load()函数调用之前设置一个加载提示，加载完成后再将其隐藏。如下所示：

$("#loading").show();
$("#content").load("page.html", function() {
    console.log("页面加载完成");
    $("#loading").hide();
});

上述代码首先在页面上显示一个ID为loading的元素，然后调用load()函数加载页面，当页面加载完成后，通过回调函数隐藏loading元素。

示例说明1：
假设有一个页面（page.html）需要加载，下面是加载其内容的完整实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>加载页面内容示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $("#loading").show();
            $("#content").load("page.html", function() {
                console.log("页面加载完成");
                $("#loading").hide();
            }); 
        });
    </script>
    <style>
        #loading {
            display: none;
        }
    </style>
</head>
<body>
    <div id="loading">正在加载中，请稍等...</div>
    <div id="content"></div>
</body>
</html>

上述代码在页面加载时会先显示一个ID为loading的元素，然后使用load()函数加载页面（page.html），页面加载完成后，loading元素将被隐藏。

示例说明2：
假设有一个包含多个超链接的页面（index.html），点击链接时会通过AJAX异步加载链接指向的页面，下面是完整实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>链接动态加载示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            $("a").click(function(e) {
                e.preventDefault();
                var href = $(this).attr("href");
                $("#loading").show();
                $("#content").load(href, function() {
                    console.log("页面加载完成");
                    $("#loading").hide();
                });
            });
        });
    </script>
    <style>
        #loading {
            display: none;
        }
    </style>
</head>
<body>
    <div id="loading">正在加载中，请稍等...</div>
    <div id="content"></div>
    <div id="links">
        <a href="page1.html">页面1</a>
        <a href="page2.html">页面2</a>
        <a href="page3.html">页面3</a>
    </div>
</body>
</html>

上述代码监听页面上所有超链接的click事件，当用户点击链接时阻止默认行为（即禁止页面跳转），获取链接指向的页面地址并通过load()函数加载页面，页面加载完成后隐藏loading元素。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用JQuery的load函数动态加载其它页面的内容的实现代码 - Python技术站