下午在看视频的时候，遇到一个问题：如何把后端 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，也能学到新东西。东西再小，关键看有没有收获。当然一千人眼里有一千个哈姆雷特，每个人都有自己的看法，这无可厚非。但总的来说，只要每天进步就行。