本文實例講述了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.49028c.com),提供大量腳本及素材供大家下載!</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。
先來看一個簡單的實例
<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程序設計有所幫助。
新聞熱點
疑難解答
