jQuery中ajax的load()與post()方法實例詳解
本文實例講述了jQuery中ajax的load()與post()方法。分享給大家供大家參考，具體如下：
一、load()方法
在jQuery ajax的load()方法能夠載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中,這個與post,get還是有一點的區(qū)別，但可以快速在頁面加載時就加載一個頁面的html保存到dom中并且可執(zhí)行哦。
load()方法默認(rèn)使用 GET 方式, 如果傳遞了data參數(shù)則使用Post方式.
傳遞附加參數(shù)時自動轉(zhuǎn)換為 POST 方式。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 代碼。語法形如 "url #some > selector", 默認(rèn)的選擇器是"body>*".
講解:
load是最簡單的Ajax函數(shù), 但是使用具有局限性:
1.它主要用于直接返回HTML的Ajax接口
2.load是一個jQuery包裝集方法,需要在jQuery包裝集上調(diào)用,并且會將返回的HTML加載到對象中, 即使設(shè)置了回調(diào)函數(shù)也不過不可否認(rèn)load接口設(shè)計巧妙并且使用簡單.下面通過示例來演示Load接口的使用:
load()函數(shù):
函數(shù)介紹：load(url, [data], [callback]) 返回值:jQuery
參數(shù)說明：
url:待裝入 HTML 網(wǎng)頁網(wǎng)址。
data:（可選參數(shù)）發(fā)送至服務(wù)器的 key/value 數(shù)據(jù)。
callback:（可選參數(shù)）載入成功時回調(diào)函數(shù)。
下面進(jìn)行實例演示：
首先建立需要加載的test.html文件：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax演示</title> </head> <body> 腳本之家(chabaoo.cn),提供大量腳本及素材供大家下載! </body> </html>
然后建立ajax.html文件，記得引入jquery。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#result").load("test.html",function(responseText,textStatus){
$("#display").append("<hr>responseText:"+responseText);
$("#display").append("<hr>textStatus:"+textStatus);
});
});
});
</script>
</head>
<body>
<input type="button" value="測試" id="btn" />
<h2>顯示的內(nèi)容如下：</h2>
<div id="result"></div>
<h2>結(jié)果：</h2>
<div id="display"></div>
</body>
</html>
上面的示例演示了如何使用Load方法.
提示:
① 我們要時刻注意瀏覽器緩存, 當(dāng)使用GET方式時要添加時間戳參數(shù) (net Date()).getTime() 來保證每次發(fā)送的URL不同, 可以避免瀏覽器緩存.
② 當(dāng)在url參數(shù)后面添加了一個空格, 比如" "的時候, 會出現(xiàn)"無法識別符號"的錯誤, 請求還是能正常發(fā)送. 但是無法加載HTML到DOM. 刪除后問題解決.
二、post()方法
在jquery中的ajax有二個數(shù)據(jù)發(fā)送模式，一種是get()，前面的文章有講過，另一種是post()。這里再來給大家介紹一下，有需要了解的朋友可參考.
首先認(rèn)識要jQuery.post(url, [data], [callback], [type])
對參數(shù)進(jìn)行說明：
url:發(fā)送請求地址。
data:待發(fā)送 Key/value 參數(shù)。
callback:發(fā)送成功時回調(diào)函數(shù)。
type:返回內(nèi)容格式，xml, html, script, json, text, _default。
說明:
通過遠(yuǎn)程 HTTP POST 請求載入信息。
這是一個簡單的 POST 請求功能以取代復(fù)雜 $.ajax 。請求成功時可調(diào)用回調(diào)函數(shù)。如果需要在出錯時執(zhí)行函數(shù)，請使用 $.ajax。
先來看一個簡單的實例
然后建立ajax.html文件，注意js代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$("#sub").click(function(){
$.post("testPost.php",{name:$("#name").val()},function(data,textStatus){
$("#result").append("data:"+data.name);
$("#result").append("<br>textStatus:"+textStatus);
},"json");
return false;
});
});
</script>
</head>
<body>
<form action="testPost.php" method="post">
<input type="text" name="name" id="name" >
<input type="submit" id="sub" value="提交">
</form>
<h2>顯示的內(nèi)容如下：</h2>
<div id="result"></div>
</body>
</html>
用法2:(點擊post數(shù)據(jù)返回數(shù)據(jù))
<input type="button" id="bnajax" value="ajax" onclick="ajaxTest()" />
<script type="text/javascript" >
function ajaxTest()
{
$.post("http://localhost:8012/t.asp", { "txt": "123" },function(data)
{
$("#divMsg").html(data);
}
);
}
</script>
例3
JS代碼：
<script>
$(document).ready(function(){
$(".ajax_btn").click(function(){
$.post("ajax.php",//異步處理動態(tài)頁面
{name:$(".name").val()},//獲取類名為"name"文本的值，以NAME異步傳值
function(data){//data為反回值，function進(jìn)行反回值處理
$(".content").val(data);//獲得得反回值后，將其填入到類名為"content"的文本框中
});
})
})
</script>
ajax.php代碼：
<?php
$name=$_POST["name"];
if($name=="netxu"){
echo "對不起，".$name."數(shù)據(jù)存在";
}
else{
echo "恭喜你，".$name."可以使用";
}
?>
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
基于jquery實現(xiàn)點擊鏈接彈出層效果，其基本實現(xiàn)原理是這樣的：jquery操作DOM元素。對層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對jq點擊彈出層相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
jQuery列表動態(tài)增加和刪除的實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于jQuery列表動態(tài)增加和刪除的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
jQuery實現(xiàn)只允許輸入數(shù)字和小數(shù)點的方法
這篇文章主要介紹了jQuery實現(xiàn)只允許輸入數(shù)字和小數(shù)點的方法,涉及jQuery針對鍵盤事件的響應(yīng)及字符串操作的相關(guān)技巧,需要的朋友可以參考下2016-03-03
jQuery控制輸入框只能輸入數(shù)值的小例子，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了jQuery實現(xiàn)預(yù)加載圖片的方法,涉及jQuery操作img的src屬性使用技巧,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄猨query基本選擇器匹配多個元素的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
通過jquery實現(xiàn)tab標(biāo)簽瀏覽效果
這篇文章主要介紹了通過jquery實現(xiàn)tab標(biāo)簽瀏覽效果2007-02-02
這篇文章主要介紹了jquery插件懶加載的示例，幫助大家更好的利用jQuery制作網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
在寫Web 應(yīng)用，或者Web Ajax功能的時候我們經(jīng)常需要處理事件，jquery已經(jīng)非常完美的封裝了事件，但是有時候事件的執(zhí)行順序還是會有微小差別2009-12-12
下面小編就為大家?guī)硪黄猨Query菜單實例(全選,反選,取消)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08