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

  • 相关阅读:
    V4L2学习(三)框架分析
    Linux 内核源码外编译 linux模块--编译驱动模块的基本方法
    V4L2学习(二)结构介绍
    V4L2学习(一)整体说明
    Linux内存管理之mmap详解
    C语言指针分析
    V4L2使用V4L2_MEMORY_USERPTR和V4L2_MEMORY_MMAP的区别
    Ubuntu添加环境变量
    list_add_tail()双向链表实现分析
    Linux下查看USB设备信息
  • 原文地址:https://www.cnblogs.com/dirkhe/p/6568642.html
Copyright © 2011-2022 走看看