資訊專欄INFORMATION COLUMN
摘要：在前一篇介紹的數(shù)據(jù)加載中的例子都是從靜態(tài)的文件中取得數(shù)據(jù)，而更大的價值在于與后端服務(wù)器進(jìn)行數(shù)據(jù)傳遞，動態(tài)地請求和發(fā)送數(shù)據(jù)。首先用方式請求數(shù)據(jù)方式點(diǎn)擊標(biāo)簽后，當(dāng)前頁面為數(shù)據(jù)請求成功。
在前一篇介紹 jQuery Ajax 的數(shù)據(jù)加載中的例子都是從靜態(tài)的文件中取得數(shù)據(jù)，而 Ajax 更大的價值在于與后端服務(wù)器進(jìn)行數(shù)據(jù)傳遞，動態(tài)地請求和發(fā)送數(shù)據(jù)。
請求數(shù)據(jù)我們可以使用 GET、POST 兩種方式向后端請求數(shù)據(jù)，這里以 PHP 為例，假設(shè)有測試頁面 age.php，用于返回年齡信息，內(nèi)容為：
if(isset($_REQUEST["name"]) && $_REQUEST["name"] == "stephen") {
echo "23";
}
當(dāng)前頁面內(nèi)容為：
stephen age :
我們希望點(diǎn)擊 a 標(biāo)簽后，在不刷新頁面的前提下獲取年齡信息。首先用 GET 方式請求數(shù)據(jù):
GET 方式 $("a").click(function(e) {
e.preventDefault();//
var url = $(this).attr("href"),
name = $(this).text(),
requestData = {"name": name};
$.get(url, requestData, function(data) {
$("#sex").html(data);
});
});
點(diǎn)擊 a 標(biāo)簽后，當(dāng)前頁面為：
數(shù)據(jù)請求成功。我們再用 POST 方式測試下：
POST 方式 $("a").click(function(e) {
e.preventDefault();//
var url = $(this).attr("href"),
name = $(this).text(),
requestData = {"name": name};
$.post(url, requestData, function(data) {
$("#sex").html(data);
});
});
代碼幾乎一樣，只是由 get 方法變?yōu)榱?post 方法。
這里我們其實(shí)還可以用 load 方法簡化代碼：
$("a").click(function(e) {
e.preventDefault();
var url = $(this).attr("href"),
name = $(this).text(),
requestData = {"name": name};
$("#sex").load(url, requestData);
});
發(fā)送數(shù)據(jù)
除了可以使用 Ajax 技術(shù)從后端獲取數(shù)據(jù)，還可以向后端發(fā)送數(shù)據(jù)，常見的就是異步提交表單的情景，這里以用戶驗(yàn)證為例：
假設(shè)當(dāng)用戶名為 stephenlee，密碼為 123456 時驗(yàn)證通過，否則失敗，測試頁面 validate.php 為：
if($_REQUEST["username"] == "stephenlee" && $_REQUEST["password"] == "123456") {
echo "pass";
} else {
echo "fail";
}
使用 get 方式發(fā)送數(shù)據(jù)到后端驗(yàn)證：
$("form").submit(function(e) {
e.preventDefault();//
var url = $(this).attr("action"),
username = $("input[name="username"]").val(),
password = $("input[name="password"]").val(),
requestData = {"username": username, "password": password};
$.get(url, requestData, function(result) {
alert(result);
});
});
輸入錯誤用戶名 lucas 后，結(jié)果為：
輸入正確用戶名 stephenlee 后，結(jié)果為：
使用 post 方式發(fā)送數(shù)據(jù)思路相同，就不再贅述了。
參考http://book.douban.com/subject/24669823/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87553.html
摘要：觀察函數(shù)和函數(shù)可以用來作為觀察函數(shù)，我們可以使用觀察函數(shù)的回調(diào)函數(shù)來做相應(yīng)的處理。當(dāng)請求開始且尚未進(jìn)行其他傳輸時，會觸發(fā)的回調(diào)函數(shù)。當(dāng)最后一次活動請求終止時，則會執(zhí)行通過注冊的回調(diào)函數(shù)。 對于 jQuery 通過 Ajax 方式傳遞數(shù)據(jù)時，我們還可以在過程中進(jìn)行一定的處理，以便達(dá)到我們的需求。 觀察函數(shù) ajaxStart 和 ajaxStop 函數(shù)可以用來作為觀察函數(shù)，我們可以使...
摘要：同樣將其綁定在按鈕點(diǎn)擊事件上查看結(jié)果為這里需要注意，如果文檔內(nèi)的格式錯誤，雖然不會報錯，但是將無法執(zhí)行回調(diào)函數(shù)。 Ajax 通俗來講即不需要刷新頁面即可從服務(wù)器或客戶端上加載數(shù)據(jù)，當(dāng)然這些數(shù)據(jù)的格式是多種多樣的。 加載 HTML 我們通常使用加載 HTML 的方法來加載 HTML 片段，并插入到指定位置，假設(shè)當(dāng)前頁面為： load showImg(http://segmen...
摘要：此時，點(diǎn)擊新建的將會觸發(fā)。設(shè)置元素內(nèi)容的方法則使用上述兩種方法，將新內(nèi)容作為參數(shù)傳遞即可，例如修改上例中的文本內(nèi)容方法同理。 我們知道通過 $() 函數(shù)可以訪問文檔中的元素，并返回一個 jQuery 對象，并且通過一系列方法，我們可以修改元素的樣式和內(nèi)容，實(shí)際上，我們還可以通過該函數(shù)做更多的事情，例如添加、刪除、復(fù)制等操作來改變 DOM 樹的結(jié)構(gòu)。 創(chuàng)建元素 我們可以通過 $() ...
摘要：為了更方便對元素操作，提供了完整的選擇符體系，可以分為選擇符屬性選擇符以及自定選擇符。選擇符幾乎支持到規(guī)范中的所有選擇符。介紹個比較有用的自定義選擇符選擇符。 為了更方便對 DOM 元素操作，jQuery 提供了完整的選擇符體系，可以分為 CSS 選擇符、屬性選擇符以及自定選擇符。 CSS 選擇符 jQuery 幾乎支持 CSS1 到 CSS3 規(guī)范中的所有選擇符。舉例如下： ...
摘要：添加全局函數(shù)所謂全局函數(shù)就是對象的方法，例如在一篇中介紹的等方法。 當(dāng)我們希望將一些功能性代碼重復(fù)使用，可以將其打包成一個 jQuery 插件來使用。 使用 $ 別名 首先我們在編寫插件時必須保證 jQuery 庫已經(jīng)載入，但是我們不能保證 $ 一定可用，為了使用 $ 別名，我們可以利用 IIFE （Immediately Invoked Function Expression），...
閱讀 2459·2021-11-18 10:02
閱讀 1965·2021-10-13 09:40
閱讀 3038·2021-09-07 10:07
閱讀 2148·2021-09-04 16:48
閱讀 1039·2019-08-30 13:18
閱讀 2481·2019-08-29 14:03
閱讀 2956·2019-08-29 12:54
閱讀 3186·2019-08-26 11:41
