zend框架實現支持sql server的操作方法
683
2024-01-19
本文實例講述了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.gimoo.net),提供大量腳本及素材供大家下載! </body> </html>
然后建立ajax.html文件，記得引入jquery。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.gimoo.net/t/1904/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="http://www.gimoo.net/t/1904/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程序設計有所幫助。
