本文實例講述了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。
先來看一個簡單的實例
$_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程式設計有所幫助。
