1.load方法简介
作用：从服务器加载数据，并把返回的数据放置到指定的元素中。
语法：$(selector).load(url,data,function(response,status,xhr))
| 参数 | 描述 |
|---|---|
| url | 必需。规定您需要加载的 URL。 |
| data | 可选。规定连同请求发送到服务器的数据。 |
| function(response,status,xhr) | 可选。规定 load() 方法完成时运行的回调函数。 额外的参数：
|
表格转载自（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.运行效果
参考文章：