用ajax獲取后端數據，顯示在前端，實現了基本計算器功能

　　下午在看視頻的時候，遇到一個問題：如何把后端 print_r或echo的數據顯示在前端。百度了一下，說是用ajax，想着前一陣子學習了ajax，並且最近也想做一個計算器，於是就自己鑽起來了。

　　計算器的實現是在前端進行的，用JS去寫的。后端只是把POST的數據pirnt_r出來，因為post是預定義變量，預定義變量全是數組，所以將其foreach，找到result，並顯示在前端頁面上。

　　廢話不多說，先上代碼：

HTML/CSS

 

    <form  action='CALC.php' method='POST'>
        <input type='text' name='calc1' id='in1' />
        <input type='text' id='sel'>
        <input type='text' name='calc2' id='in2'/>
        <input type='text' value='='/>
        <input type='text' name='result' id='result'/>
        <input type='button' name='submit' id='submit' value='click'/>
    </form>

 

input[type='text']{width:20px;}

基本計算功能

var oValue1=document.getElementById('in1');
        var oValue2=document.getElementById('in2');
        var oBtn=document.getElementById('submit');
        var oResult=document.getElementById('result');
        var oSel=document.getElementById('sel');
        //var oPt=oSel.getElementsByTagName('option');
      
        function calc(a,b,c){
                var result=0;
                 switch (c.value){
                case '+':
                    result=a+b;
                    break;
                case '-':
                    result=a-b;
                    break;
                case '*':
                    result=a*b;
                    break;
                case '/':
                    result=a/b;
                    break;    
                } 
                return result
        }

 

　　剛開始我是用select和option做的 加 減 乘 除  但是后來發現原生js很難去獲取option 因為select的長度為4，如果使用js去獲取select下的option，則難免要用閉包（http://www.cnblogs.com/dirkhe/p/6031426.html），為了簡單起見，我還是省去了閉包環節吧。我選擇一個input手動輸入加 減 乘 除吧。這樣獲取就容易多了。

　　重點看下Ajax

AJAX

oBtn.onclick=function(){
                //轉換數據類型
                 var o1=parseInt(oValue1.value);
                 var o2=parseInt(oValue2.value);
            
                //定義一個變量，等會要傳到后台去    
                var info='result='+calc(o1,o2,oSel);
                //僅僅是chrome的建立ajax對象
                var xhr=new XMLHttpRequest();
                //判斷ajax對象是否發送
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4){
                        oResult.value=(xhr.responseText);
                        }        
                }
                //建立http請求
                xhr.open('post','CALC.php?addr=beji',true);
                //post方式的特殊處理，get方式沒有
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                //發送http請求
                xhr.send(info);
                
        }

PHP

//遍歷
 foreach($_POST as $key=>$value){
    //輸出 value
    echo $value;
 }

最后看下演示結果

　　總結

　　可能有時候會覺得畫蛇添足，但是確實通過這個小實例，既能復習了之前學的ajax和js，也能學到新東西。東西再小，關鍵看有沒有收獲。當然一千人眼里有一千個哈姆雷特，每個人都有自己的看法，這無可厚非。但總的來說，只要每天進步就行。