首頁 > 開發者 > JavaScript
jQuery中ajax的load()與post()方法執行個體詳解，jqueryajax
本文執行個體講述了jQuery中ajax的load()與post()方法。分享給大家供大家參考，具體如下：
一、load()方法
在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>幫客之家(www.jb51.net),提供大量指令碼及素材供大家下載!</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>顯示的內容如下：</h2><div id="result"></div><h2>結果：</h2><div id="display"></div></body></html>
上面的樣本示範了如何使用Load方法.
提示:
① 我們要時刻注意瀏覽器緩衝, 當使用GET方式時要新增時間戳記參數 (net Date()).getTime() 來保證每次發送的URL不同, 可以避免瀏覽器緩衝.
② 當在url參數後面添加了一個空格, 比如" "的時候, 會出現"無法識別符號"的錯誤, 請求還是能正常發送. 但是無法載入HTML到DOM. 刪除後問題解決.
二、post()方法
在jquery中的ajax有二個資料發送模式，一種是get()，前面的文章有講過，另一種是post()。這裡再來給大家介紹一下，有需要瞭解的朋友可參考.
首先認識要jQuery.post(url, [data], [callback], [type])
對參數進行說明：
url:發送請求地址。
data:待發送 Key/value 參數。
callback:發送成功時回呼函數。
type:返回內容格式，xml, html, script, json, text, _default。
說明:
通過遠程 HTTP POST 請求載入資訊。
這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。如果需要在出錯時執行函數，請使用 $.ajax。
先來看一個簡單的執行個體
複製代碼 代碼如下:<?php echo json_encode(array("name"=>$_POST['name']));?>
然後建立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>顯示的內容如下：</h2><div id="result"></div></body></html>
用法2:(點擊post資料返回資料)
<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",//非同步處理動態網頁面 {name:$(".name").val()},//擷取類名為"name"文本的值，以NAME非同步傳值 function(data){//data為反回值，function進行反回值處理 $(".content").val(data);//獲得得反回值後，將其填入到類名為"content"的文字框中 }); })})</script>
ajax.php代碼：
<?php$name=$_POST["name"];if($name=="netxu"){ echo "對不起，".$name."資料存在";}else{ echo "恭喜你，".$name."可以使用";}?>
希望本文所述對大家jQuery程式設計有所協助。
您可能感興趣的文章:Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
