用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，也能学到新东西。东西再小，关键看有没有收获。当然一千人眼里有一千个哈姆雷特，每个人都有自己的看法，这无可厚非。但总的来说，只要每天进步就行。