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