延續上一篇[鐵人賽Day25]AJAX基礎入門(搭配使用PHP示範)
這次是使用jQuery AJAX的方式呈現出一樣的效果
(OS隨手筆記-jQuery AJAX部分的應用:http://www.dotblogs.com.tw/jhsiao/archive/2014/08/31/146422.aspx)
jQuery AJAX使用方法可以參照官方的說明
(資料參考:http://api.jquery.com/jquery.ajax/)
接下來,會以搭配PHP的方式做示範。
「index_ajax.html」
<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>
選項:
<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>
可以從看到當Select標籤的選項被選取時,會觸發一個JavaScript函式check()
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 "請選擇一個選項";
}
?>
呈現出來的結果就如同上一篇的結果是一樣的,只是寫法與運用的方法不一樣