利用Jquery的load函數實現頁面的動態加載 

   js的強大功能相信大家都知曉，今天通過jquery的庫函數load可以更加方便的實現頁面的動態刷新，經過幾天的研究與探索，終於有所成效！吾心甚蔚！

     一、基本語法為：

   $('#區域id').load('頁面名稱');

   具體來說，此事件有4個方法，格式分別是： 

   1、load(url)

 

   2、load(url,[data])

 

   3、load(url,[callback]) 

   4、load(url,[data],[callback])

 

      url (String) : 待裝入 HTML 網頁網址。

 

      data (Map) : (可選) 發送至服務器的 key/value 數據。

 

      callback (Callback) : (可選) 載入成功時回調函數。

  二、下面以具體實例來分析其效果：

   實例1，用第一個方法加載一個文件：

$("#box").load("testa.html"); //在id為box的元素里加載testa.html頁面執行后的結構！

   實例2，用第二個方法加載一個文件（需要參數）：

$("#box").load("testa.html",{name:"bingo",sex:"man"}); //傳2個參數到testa.html頁面，並在id為box的元素里加載testa.html頁面執行后的結構！

    實例3，用第三種方法加載一個文件：

$("#box").load("testa.html",function(){alert("OK!");}); //在id為box的元素里加載testa.html頁面執行后的結構，並在執行完之后觸發后面的function！

     三、接下來是一個本人具體的代碼實例：

 1.包含庫函數，類似於C語言文件包含命令，同css包含

<script src="js/jquery-2.1.4.min.js"></script>

紅色部分為js路徑

2.定義load函數功能：

<script>
$(document).ready(function()
{
  $("#button").click(function()
  {
     $('#home').load("ok.html");
  })
})
</script>

功能指的是在id為button的屬性，發生click時，讓id為Home的div加載ok.html這個網頁

3.具體位置代碼如下：

<a id="button">OK</a>

<div id="home">
</div>

其中Home為提前定義好的div

四、其他注意事項：

1.load函數最好在php網頁中應用，也就是說要在php服務器上運行，本地調試需要搭建php本地環境，相對麻煩但是可以百度到；

2.在load的url里加上空格后面就可以跟選擇器了。

例如：$("#box").load("testa.html #test"); //加載testa.html文件中id為"test"的元素內容！