jQuery使用ajax的load()載入頁面方法

阿新 • • 發佈：2019-02-06

在jQuery ajax的load()方法能夠載入遠端 HTML 檔案程式碼並插入至 DOM 中,這個與post,get還是有一點的區別，但可以快速在頁面載入時就載入一個頁面的html儲存到dom中並且可執行哦。

load()方法預設使用 GET 方式, 如果傳遞了data引數則使用Post方式.

- 傳遞附加引數時自動轉換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文件，DOM 中將僅插入篩選出的 HTML 程式碼。語法形如 "url #some > selector", 預設的選擇器是"body>*".

講解:

load是最簡單的Ajax函式, 但是使用具有侷限性:

1.它主要用於直接返回HTML的Ajax介面
2.load是一個jQuery包裝集方法,需要在jQuery包裝集上呼叫,並且會將返回的HTML載入到物件中, 即使設定了回撥函式也不過不可否認load介面設計巧妙並且使用簡單.下面通過示例來演示Load介面的使用:

load()函式:

函式介紹：load(url, [data], [callback]) 返回值:jQuery

引數說明：

url:待裝入 HTML 網頁網址。

data:（可選引數）傳送至伺服器的 key/value 資料。

callback:（可選引數）載入成功時回撥函式。

下面進行例項演示：

首先建立需要載入的test.html檔案：

程式碼如下	複製程式碼
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax演示</title> </head> <body> php點點通（www.php100.com）,關注php開發，提供專業web開發教程! </body> </html>

然後建立ajax.html檔案，記得引入jquery。

程式碼如下

複製程式碼

上面的示例演示瞭如何使用Load方法.

提示:我們要時刻注意瀏覽器快取, 當使用GET方式時要新增時間戳引數 (net Date()).getTime() 來保證每次傳送的URL不同, 可以避免瀏覽器快取.

提示: 當在url引數後面添加了一個空格, 比如" "的時候, 會出現"無法識別符號"的錯誤, 請求還是能正常傳送. 但是無法載入HTML到DOM. 刪除後問題解決.