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

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

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

     1、基本語法爲：

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

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

   一、load(url)

 

   二、load(url,[data])

 

   三、load(url,[callback]) 

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

 

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

 

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

 

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

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

   實例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！

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

 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

4、其餘注意事項：

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

2.在load的url里加上空格後面就能夠跟選擇器了。

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