概要
過去只能運用互動式網頁技術向伺服器請求資源服務(如ASP,PHP,JSP等)。隨著AJAX技術的興起，讓我們也可以透過以下jQuery函數向伺服器發起服務請求：
- Load 取回位於伺服器的檔案資源。
- Get 向伺服器請求數据服務。
- Post 提交數据給伺服器處理。
在後面的小節裏，會有每一個函數的使用範例與細部的說明，讓大家能夠很快掌握這些函數的使用要領。
使用jQuery Load函數
在Server端創建一支demo_str.txt的文字檔，作為jQuery Load載入的資料來源，其內容如下：
<h4>這是一個測試文字檔...</h4>
寫一支load.html，在head把jquery.min.js函數庫載入並增加jquery load的腳本實作的程式碼，呼叫且回傳文字檔的內容到id='jqloadDiv'的div標籤。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用jQuery Load函數</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#jqloadDiv").load("demo_str.txt");
});
});
</script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="執行jQuery Load按鈕" />
<div id="jqloadDiv"></div>
</body>
</html>
操作jQuery Get函數
在Server端建立一支obtval_by_get.php，用作jQuery Get函數的呼叫網頁，該頁程式只有包含了一行簡短的文字內容輸出。
<?php
echo "This is testing data. (by Get func)";
?>
撰寫一支get.html，先在head加入jquery.min.js函數庫，再來增加一段jquery get函數實作的腳本程式碼，呼叫並取回echo輸出的文字串流和連線狀態。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用jQuery Get函數</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$.get("obtval_by_get.php",function(data,status){
//alert("資料: " + data + "\n狀態: " + status);
$("#jqDiv").html("資料: " + data + "<br/>狀態: " + status);
});
});
});
</script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="執行jQuery Get按鈕" />
<div id="jqDiv"></div>
</body>
</html>
運用jQuery Post函數
在Server端建立一支obtval_by_post.php，用來處理由jQuery Post傳遞過來的name和greetings參數，其內容如下：
<?php
if(isset($_POST["name"]) && isset($_POST["greetings"])){
echo $_POST["greetings"].$_POST["name"].". (by Post func)";
}
?>
再寫一支post.html，於head加入jquery.min.js和jquery post函數實作的腳本程式碼，必需附加name與greetings兩個參數值，最後會回傳處理結果和連線狀態。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用jQuery Post函數</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$.post("obtval_by_post.php",
{
name:"Peter",
greetings:"Hello, "
},
function(data,status){
//alert("資料: " + data + "\n狀態: " + status);
$("#jqDiv").html("資料: " + data + "<br/>狀態: " + status);
});
});
});
</script>
</head>
<body>
<input type="button" id="btn1" name="btn1" value="執行jQuery Post按鈕" />
<div id="jqDiv"></div>
</body>
</html>
總結
閱讀完以上三個簡單的小範例說明之後，讓我們也可以使用jQuery AJAX的技術向伺服器請求資源服務。由於是經過AJAX回傳的結果，不需要刷新頁面，而且還可以動態改變用戶介面(UI)的顯示效果。
沒有留言:
張貼留言