iT邦幫忙

DAY 26
3

遭遇PHP之經驗分享系列 第 26

[鐵人賽Day26]jQuery AJAX部分的應用

延續上一篇[鐵人賽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 "請選擇一個選項"; 
         }
?>

呈現出來的結果就如同上一篇的結果是一樣的,只是寫法與運用的方法不一樣


上一篇
[鐵人賽Day25]AJAX基礎入門(搭配使用PHP示範)
下一篇
[鐵人賽Day27]Captcha驗證碼分析與實作
系列文
遭遇PHP之經驗分享30

尚未有邦友留言

立即登入留言