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.運行效果
參考文章：