法: $.ajax([settings]);
php作為后臺的處理過程
ajax參數(shù)詳解:
data
類型:String
發(fā)送到服務(wù)器的數(shù)據(jù)。將自動轉(zhuǎn)換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉(zhuǎn)換。必須為 Key/Value 格式。如果為數(shù)組,jQuery 將自動為不同值對應(yīng)同一個名稱。如 {foo:["bar1", "bar2"]} 轉(zhuǎn)換為 '&foo=bar1&foo=bar2'。
dataFilter
類型:Function
給 Ajax 返回的原始數(shù)據(jù)的進(jìn)行預(yù)處理的函數(shù)。提供 data 和 type 兩個參數(shù):data 是 Ajax 返回的原始數(shù)據(jù),type 是調(diào)用 jQuery.ajax 時提供的 dataType 參數(shù)。函數(shù)返回的值將由 jQuery 進(jìn)一步處理。
dataType
類型:String
預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定,jQuery 將自動根據(jù) HTTP 包 MIME 信息來智能判斷,比如 XML MIME 類型就被識別為 XML。在 1.4 中,JSON 就會生成一個 JavaScript 對象,而 script 則會執(zhí)行這個腳本。隨后服務(wù)器端返回的數(shù)據(jù)會根據(jù)這個值解析后,傳遞給回調(diào)函數(shù)。可用值:
"xml": 返回 XML 文檔,可用 jQuery 處理。
"html": 返回純文本 HTML 信息;包含的 script 標(biāo)簽會在插入 dom 時執(zhí)行。
"script": 返回純文本 JavaScript 代碼。不會自動緩存結(jié)果。除非設(shè)置了 "cache" 參數(shù)。注意:在遠(yuǎn)程請求時(不在同一個域下),所有 POST 請求都將轉(zhuǎn)為 GET 請求。(因為將使用 DOM 的 script標(biāo)簽來加載)
"json": 返回 JSON 數(shù)據(jù) 。
"jsonp": JSONP 格式。使用 JSONP 形式調(diào)用函數(shù)時,如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數(shù)名,以執(zhí)行回調(diào)函數(shù)。
"text": 返回純文本字符串
error
類型:Function
默認(rèn)值: 自動判斷 (xml 或 html)。請求失敗時調(diào)用此函數(shù)。
有以下三個參數(shù):XMLHttpRequest 對象、錯誤信息、(可選)捕獲的異常對象。
如果發(fā)生了錯誤,錯誤信息(第二個參數(shù))除了得到 null 之外,還可能是 "timeout", "error", "notmodified" 和 "parsererror"。
這是一個 Ajax 事件。
global
類型:Boolean
是否觸發(fā)全局 AJAX 事件。默認(rèn)值: true。設(shè)置為 false 將不會觸發(fā)全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。
ifModified
類型:Boolean
僅在服務(wù)器數(shù)據(jù)改變時獲取新數(shù)據(jù)。默認(rèn)值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中,它也會檢查服務(wù)器指定的 'etag' 來確定數(shù)據(jù)沒有被修改過。
jsonp
類型:String
在一個 jsonp 請求中重寫回調(diào)函數(shù)的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數(shù)里的 "callback" 部分,比如 {jsonp:'onJsonPLoad'} 會導(dǎo)致將 "onJsonPLoad=?" 傳給服務(wù)器。
jsonpCallback
類型:String
為 jsonp 請求指定一個回調(diào)函數(shù)名。這個值將用來取代 jQuery 自動生成的隨機(jī)函數(shù)名。這主要用來讓 jQuery 生成度獨特的函數(shù)名,這樣管理請求更容易,也能方便地提供回調(diào)函數(shù)和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候,指定這個回調(diào)函數(shù)名。
password
類型:String
用于響應(yīng) HTTP 訪問認(rèn)證請求的密碼
processData
類型:Boolean
默認(rèn)值: true。默認(rèn)情況下,通過data選項傳遞進(jìn)來的數(shù)據(jù),如果是一個對象(技術(shù)上講只要不是字符串),都會處理轉(zhuǎn)化成一個查詢字符串,以配合默認(rèn)內(nèi)容類型 "application/x-www-form-urlencoded"。如果要發(fā)送 DOM 樹信息或其它不希望轉(zhuǎn)換的信息,請設(shè)置為 false。
scriptCharset
類型:String
只有當(dāng)請求時 dataType 為 "jsonp" 或 "script",并且 type 是 "GET" 才會用于強制修改 charset。通常只在本地和遠(yuǎn)程的內(nèi)容編碼不同時使用。
success
類型:Function
請求成功后的回調(diào)函數(shù)。
參數(shù):由服務(wù)器返回,并根據(jù) dataType 參數(shù)進(jìn)行處理后的數(shù)據(jù);描述狀態(tài)的字符串。
這是一個 Ajax 事件。
traditional
類型:Boolean
如果你想要用傳統(tǒng)的方式來序列化數(shù)據(jù),那么就設(shè)置為 true。請參考工具分類下面的 jQuery.param 方法。
timeout
類型:Number
設(shè)置請求超時時間(毫秒)。此設(shè)置將覆蓋全局設(shè)置。
type
類型:String
默認(rèn)值: "GET")。請求方式 ("POST" 或 "GET"), 默認(rèn)為 "GET"。注意:其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支持。
url
類型:String
默認(rèn)值: 當(dāng)前頁地址。發(fā)送請求的地址。
username
類型:String
用于響應(yīng) HTTP 訪問認(rèn)證請求的用戶名。
xhr
類型:Function
需要返回一個 XMLHttpRequest 對象。默認(rèn)在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫或者提供一個增強的 XMLHttpRequest 對象。這個參數(shù)在 jQuery 1.3 以前不可用。
訪問jQuery官方網(wǎng)站(http://jquery.com),如圖1-1所示。
jQuery官方網(wǎng)站
在頁面上方可以看到Download jQuery按鈕,該按鈕上的v3.3.1是jQuery當(dāng)前最新版本的版本號,單擊該按鈕后,進(jìn)入下載頁面。
為了獲取其他版本的jQuery,在下載頁面的下半部分找到https://code.jquery.com鏈接,獲取jQuery所有版本的下載鏈接地址,如圖2所示。
圖2 獲取jQuery下載地址
單擊圖2中標(biāo)示出的鏈接,進(jìn)入jQuery所有版本的下載頁面,即可看到j(luò)Query1.12.4版本的jQuery文件下載鏈接,如圖3所示。
圖3 jQuery 1.12.4壓縮版和未壓縮版
從圖l-3中可以看出,jQuery文件的類型主要包括未壓縮(uncompressed)的開發(fā)版和壓縮(minified)后的生產(chǎn)版。它們的區(qū)別在于,壓縮版本是將jQuery文件中的空白字符、注釋、空行等與邏輯無關(guān)的內(nèi)容刪除,并進(jìn)行一些優(yōu)化,使得文件體積減小,加載速度比未壓端版快。而未壓縮版本的代碼可讀性更好,所以建議讀者在學(xué)習(xí)期間選擇未壓縮版本。
在項目中引入jQuery時,只需要把下載好的jQuery文件保存到項目目錄中,在項目的HTML文件中使用標(biāo)簽引入即可。示例代碼如下。
<!--引入本地下載的jQuery-->
<script src="jquery-1.12.4.js"></script>
許多網(wǎng)站提供了靜態(tài)資源公共庫,通過CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))可以提高jQuery的下載速度。示例代碼如下。
節(jié)我們學(xué)習(xí)如何使用 jQuery 中的方法來添加和刪除 HTML 元素。
jQuery 中用于添加 HTML 元素的方法有如下幾種:
方法 | 描述 |
append() | 在所選元素的末尾插入內(nèi)容 |
prepend() | 在選定元素的開頭插入內(nèi)容 |
after() | 在選定元素后插入內(nèi)容 |
before() | 在選定元素之前插入內(nèi)容 |
而用于刪除元素的方法有:
方法 | 描述 |
remove() | 刪除被選元素容,包括子元素 |
empty() | 刪除被選元素的所有子節(jié)點和內(nèi)容 |
append() 方法可以在指定元素的末尾插入內(nèi)容。
語法如下:
$(selector).append(content,function(index,html))
我們來看下面這個例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").append("俠課島");
});
});
</script>
</head>
<body>
<p>你好,我的名字叫做:</p>
<button>點擊追加文本</button>
</body>
</html>
點擊按鈕,在指定的 <p> 標(biāo)簽?zāi)┪蔡砑游谋緝?nèi)容 “俠課島”,我們可以在瀏覽器中看一下演示結(jié)果:
除了文本內(nèi)容,我們還可以在元素中添加 HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("ul").append("<li>strawberry</li>");
});
});
</script>
</head>
<body>
<ul>
<li>apple</li>
<li>pear</li>
<li>peach</li>
<li>watermelon</li>
</ul>
<button>點擊追加文本</button>
</body>
</html>
在瀏覽器中的演示結(jié)果:
prepend() 方法其實和 append() 方法類似,語法也差不多。但是 prepend() 方法主要用于在被選元素的開頭插入指定內(nèi)容。
語法如下:
$(selector).prepend(content,function(index,html))
我們將上述示例中的 append() 方法改成 prepend() 方法:
$(function(){
$("button").click(function(){
$("ul").prepend("<li>strawberry</li>");
});
});
然后看一下在瀏覽器中的演示結(jié)果:
after() 方法用于在被選元素后插入指定的內(nèi)容。看起來 after() 方法和 append() 方法的作用好像差不多,但是其實兩個方法還是有區(qū)別的。 append() 方法是在被選元素的結(jié)尾插入內(nèi)容,插入的內(nèi)容仍然在元素內(nèi)部。而 after() 插入的內(nèi)容會重新起一行,與被選擇的元素并沒有什么邏輯上的聯(lián)系。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").after("<p>俠課島</p>");
});
});
</script>
</head>
<body>
<p>你好,我的名字叫做:</p>
<button>點擊追加文本</button>
</body>
</html>
在瀏覽器中的演示效果:
before() 方法用于在被選元素之前插入指定的內(nèi)容。它和 prepend() 方法的區(qū)別在于一個在被選元素內(nèi)插入內(nèi)容,一個在被選元素外。
注意 before() 方法和 after() 方法都是在被選元素外插入內(nèi)容。append() 和 prepend() 方法都是在被選元素內(nèi)插入內(nèi)容。
例如將上述示例中的方法改為 before:
$(function(){
$("button").click(function(){
$("p").before("<p>俠課島</p>");
});
});
在瀏覽器中的演示效果:
remove() 方法用于刪除被選元素及其子元素。該方法也會刪除被選元素的數(shù)據(jù)和事件。
例如下面這個例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<p>你好,歡迎來到俠課島!</p>
<button>點擊刪除</button>
</body>
</html>
在瀏覽器中的演示效果:
從上圖中可以看到,remove() 方法將指定的 p 元素連標(biāo)簽帶元素全部刪除。
empty() 方法用于刪除被選元素的所有子節(jié)點和內(nèi)容。該方法不會移除元素本身,或它的屬性。
我們講上述示例中的 remove() 方法改為empty() 方法,看看有什么不同:
$(function(){
$("button").click(function(){
$("p").empty();
});
});
在瀏覽器中的演示效果:
可以看到 empty() 方法只會刪除指定元素中的內(nèi)容,不會刪除元素本身,當(dāng)然如果元素上有屬性,屬性也不會被刪除,大家可以自己試一下。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。