jquery 實踐操做：load()方法

時間 2020-06-01

原文原文鏈接

最近決定總結下實際項目中的 JS 相關的一些操做，所以開啓此係列，記錄使用過程當中用到的一些實用操做問題和解決方法，給本身一份記錄。javascript

jquery load方法是對jQuery.ajax()進行封裝以方便咱們使用的一個方法，當咱們須要處理較爲複雜的邏輯時候，仍是須要用到jQuery.ajax()這個比較全面的方法的。php

load() 方法：

完整語法格式：load( url, [data], [callback] ) /*參數:
url是指要導入文件的地址。 data：可選參數；由於load不單單能夠導入靜態的html文件，還能夠導入動態腳本，例如PHP文件，因此要導入的是動態文件時，咱們能夠把要傳遞的參數放在這裏。 callback：可選參數；是指調用load方法並獲得服務器響應後，再執行的另一個函數。*/

實際項目中主要採用 load() 方法來動態加載一個頁面，是整個項目更加簡潔，模塊化。css

經常使用：load() 一個頁面（.html/ .jsp/ php/ ....）
下面給出幾個用法示例：html

1.加載一個php文件，該php文件不含傳遞參數java
```
$("#myID").load("/test.php"); //在id爲#myID的元素裏導入test.php運行後的結果
```
2. 加載一個php文件，該php文件含有一個傳遞參數jquery
```
$("#myID").load("/test.php",{"name":"Adam"}); //導入的php文件含有一個傳遞參數，相似於請求url：/test.php?name=Adam
```
3. 加載一個php文件，該php文件含有多個傳遞參數。注：參數間用逗號分隔ajax
```
$("#myID").load("/test.php",{"name":"Adam","site":"www.lhy-seo.com"}); //導入的php文件含有一個傳遞參數，相似於請求url：/test.php?name=Adam&site=www.phpernote.com
```
4. 加載一個php文件，該php文件以數組做爲傳遞參數數組
```
$("#myID").load("/test.php",{'myinfo[]', ["Adam", "www.lhy-seo.com"]}); //導入的php文件含有一個數組傳遞參數。 注意：使用load，這些參數是以POST的方式傳遞的，所以在/test.php裏，不能用GET來獲取參數。
```
5. 如何使用 callback，好比咱們要在load方法獲得服務器響應後，慢慢地顯示加載的內容，就可使用callback函數。瀏覽器
```
$("#go").click(function(){ $("#myID").load("welcome.php", {"lname":"Cai", "fname":"Adam", function(){ $("#myID").fadeIn('slow'); }); });
```
```
注意： load() 傳參方式是 post 方式；
```
```
要獲取所傳參數,示例：
```
```
第一個頁面中：(是經過post方式傳值的) //Js:
$(function (){ $("#test").load("a.jsp",{"name" : "Adam"}); }); //頁面元素：
<p id="test"></p>
 
第二個JSP中：（在JSP中獲取參數） //Java:
<% String username = request.getParameter("name"); System.out.println(username); %>
 
//頁面元素：
<span>這是第二個頁面</span>
 
//Js:
$(function (){ var name = "<%=username%>"; alert(name); });
```
```
 
```
6. 加載頁面片斷 緩存

.load() 方法容許咱們規定要插入的遠程文檔的某個部分。這一點是經過 url 參數的特殊語法實現的。若是該字符串中包含一個或多個空格，緊接第一個空格的字符串則是決定所加載內容的 jQuery 選擇器。好比：
```
$("#result").load("/test.html #container");
```
7. 防止jquery load使用緩存的方法

緩存這東西，在必定程度上加快了頁面的裝載，可是也經常給咱們帶來麻煩。在實際運用中，咱們可能會碰到瀏覽器緩存的問題。好比我就在IE7裏碰到這個問題。
```
$(document).ready(function(){ $("#labels").load("/test.html"); //在頁面裝載時，在ID爲#labels的DOM元素裏插入test.html的內容。
});
```
當我更新了test.html之後，在IE7裏load方法仍舊在使用舊的test.html，就算我按刷新鍵也無論用。好在jQuery提供一個防止ajax使用緩存的方法，把下面的語句加在head的javascript文件裏，就能夠解決問題。
```
$.ajaxSetup({ cache: false //關閉AJAX相應的緩存
});
```
此外我再介紹幾種方法解決緩存的方法。注意：我沒有在jQuery load的問題上測試過，這些方法僅供參考！

1.更改文件名，好比把test.html改爲lables_new.html，可是這是沒有辦法的辦法，通常沒有人這麼作。

2.在test.html後加上特定時間，好比test.html?20081116。在實際工做中，在我更新css/javascript文件後，我都是用這種辦法來防止文件被緩存。

3.在test.html文件的頂部加入如下聲明：
```
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
```
另外在使用 jquery load 的時候須要注意的是:

（1）若是綁定給window對象，則會在全部內容加載後觸發，包括窗口，框架，對象和圖像。若是綁定在元素上，則當元素的內容加載完畢後觸發。

（2）只有當在這個元素徹底加載完以前綁定load的處理函數,纔會在他加載完後觸發。若是以後再綁定就永遠不會觸發了。因此不要在$(document).ready()裏綁定load事件，由於jQuery會在全部DOM加載完成後再綁定load事件。

（3）jQuery 使用瀏覽器的 .innerHTML 屬性來解析被取回的文檔，並把它插入當前文檔。在此過程當中，瀏覽器常會從文檔中過濾掉元素，好比 <html>, <title> 或 <head> 元素。結果是，由 .load() 取回的元素可能與由瀏覽器直接取回的文檔不徹底相同。

來源：http://www.jb51.net/article/35386.htm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。