摘要:[JavaScript]jQuery AJAX部分的應用
延續上一篇[AJAX]AJAX基礎入門（搭配使用PHP示範），這次是使用jQuery AJAX的方式呈現出一樣的效果。
jQuery AJAX使用方法可以參照官方的說明
(資料參考：http://api.jquery.com/jquery.ajax/)
接下來，會以搭配PHP的方式做示範。
首頁 index_ajax.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jqajax_select.js"></script>
</head>
<body>
選項：
<select id="select_op" onchange="check()";>
<option value="" selected="selected">請選擇</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div id="message"></div>
</body>
</html>
可以從看到當Select標籤的選項被選取時，會觸發一個JavaScript函式check()。
JavaScript的部分jqajax_select.js
JavaScript的部分jqajax_select.js
var check=function(){
var select_op=$('#select_op').val();
$.ajax({
url: "jqajax_check.php",
data: "&select_op="+select_op,
type:"POST",
dataType:'text',
success: function(message){
document.getElementById("message").innerHTML=message;
},
error: function(jqXHR, textStatus, errorThrown){
document.getElementById("message").innerHTML=errorThrown;
}
});
}
由上述JavaScript語法可以看到AJAX部分使用了多個參數，將在下方簡單說明| url | 指定要進行呼叫的位置 |
| data | 傳送給Server資料的值 |
| type | 請求方式 GET/POST |
| dataType | 伺服器回傳的資料類型(有xml, json, script, html, jsonp, text) |
| sucess | 請求成功時執行的函式 |
| error | 請求失敗時執行的函式 |
由於下拉選單在選取時觸發JavaScript函式，將執行jQuery AJAX的部分
藉由參數內的數值，將選單資料(select_op)的值，送出請求給jqajax_check.php，並以POST的方式傳遞
而期望回傳的資料類型為純文字字串Text，請求成功時，傳遞回傳的資料到div區塊(message)裡呈現
如果，請求失敗，則回傳錯誤訊息
JavaScript程式碼內，$.ajax( )內url位置 jqajax_check.php
<?php
$select_op=$_POST['select_op'];
if($select_op != ""){
if($select_op == "1"){
echo "你選擇到1的選項";
}else if($select_op == "2"){
echo "你選擇到2的選項";
}else if($select_op == "3"){
echo "你選擇到3的選項";
}
}else{
echo "請選擇一個選項";
}
?>
呈現出來的結果就如同上一篇的結果是一樣的，只是寫法與運用的方法不一樣