jQuery中load方法的使用

1.load方法简介

作用：从服务器加载数据，并把返回的数据放置到指定的元素中。

语法：$(selector).load(url,data,function(response,status,xhr))

参数	描述
url	必需。规定您需要加载的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(response,status,xhr)	可选。规定 load() 方法完成时运行的回调函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象

表格转载自（https://www.runoob.com/jquery/ajax-load.html）

2.创建测试页面

2.1创建测试模板html主页面

https://www.cnblogs.com/YorkZhangYang/p/12595862.html

2.2创建2个测试页面，分别是right1.html和right2.html。

right1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接1内容</title>
</head>
<body>
    <div>
        <a href="javascript:test();"> <span style="font-size: 52px;color:green;">java se</span></a>
    </div>
    <script>
        function test(){
            alert("java se");
        }
    </script>
</body>
</html>

right2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接2内容</title>
</head>
<body>
    <div>
         <span style="font-size: 22px;color: red;">java ee</span>
    </div>
   
</body>
</html>

3.load方法的应用

3.1载入已经加载完毕的页面

//动态加载右侧内容——方法一
        $(".child_ul>li").on("click",function(){
            var href = $(this).find("a").attr("href");
            //清空右侧内容
            $('#right').empty();
            //加载右侧内容
             $('#right').load(href);
            //阻止跳转         
             return false;
        })

3.2使用ajax方法动态加载

 //动态加载右侧内容——方法二
        var menu = $(".child_ul");
        srcLi = menu.find('li');
        console.log(srcLi.html());

        srcLi.on('click', function(e) {
        var href = $(this).find("a").attr('href');
        $('#right').empty();
        $.ajax({
            type: "GET",
            url: href,
            // beforeSend: function(){
            //     $('#right').html('正在请求');
            // },
            success: function(data) {
                $('#right').append(data);
            },
            // complete: function(){   
            //  },
            //  error:function(){
            //     $('#right').html('加载出错');
            //  }
        });
        //阻止跳转
        return false;

4.运行效果

参考文章：

https://www.runoob.com/jquery/ajax-load.html

https://www.cnblogs.com/haiying520/p/5401727.html

jQuery中load方法的使用

猜你喜欢