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

用ajax获取后端数据,显示在前端,实现了基本计算器功能的更多相关文章

  1. SpringBoot笔记十一:html通过Ajax获取后端数据

    我们知道在Java Web中,前端的JSP可以使用EL表达式来获取Servlet传过来的数据Spring Boot中也有Thymeleaf模板可以使用th: text="${XXX}&quo ...

  2. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  3. ajax获取json数据及实现跨域请求

    最近想练习一下ajax获取json数据 , 首先上网找一些在线的可用来测试的接口. -----------------------------------------------------这里是接口 ...

  4. AngularJS学习笔记(3)——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  5. vue获取后端数据放在created还是mounted方法里面?

    问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...

  6. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  7. jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文

    jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xm ...

  8. JS-利用ajax获取json数据,并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

  9. Ajax获取接口数据,url拼接参数跳转页面,js获取上一级页面参数给本页面

    1.Ajax获取接口数据 function demo(){ //假设请求参数 var requestBody = [{ "name":"zhang", &quo ...

随机推荐

  1. elasticsearch java工具类

    docker运行elasticsearch docker pull elasticsearch:7.8.1 docker run -p 9200:9200 -p 9300:9300 -e " ...

  2. SparkStreaming架构

    SparkStreaming是一个对实时数据流进行高通量.容错处理的流式处理系统,可以对多种数据源(如Kdfka.Flume.Twitter.Zero和TCP 套接字)进行类似Map.Reduce和J ...

  3. Federated Optimization for Heterogeneous Networks

    郑重声明:原文参见标题,如有侵权,请联系作者,将会撤销发布! arXiv:1812.06127v3 [cs.LG] 11 Jul 2019 目录: Abstract 1 Introduction 2  ...

  4. 牛客网PAT练习场-数字分类

    签到题 地址:https://www.nowcoder.com/pat/6/problem/4078 #include<iostream> #include<cstdio> u ...

  5. 从零开始的SpringBoot项目 ( 五 ) 整合 Swagger 实现在线API文档的功能

    综合概述 spring-boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于 ...

  6. 赫然:Windows Live Writer 批量博客更新软件使用教程

    http://www.wocaoseo.com/thread-144-1-1.html 推广人员需要使用多个博客,一个一个登陆更新是很麻烦的事情,网上的桌面批量更新博客软件也不少,今天在此推荐大家使用 ...

  7. iOS NSOperation

    iOS NSOperation 一.简介 除了,NSThread和GCD实现多线程,配合使用NSOperation和NSOperationQueue也能实现多线程编程 NSOperation和NSOp ...

  8. Unity调试外部DLL

    1.更改DLL的.csproj工程配置文件,在里面添加如下属性:<PropertyGroup Condition=" '$(OS)' == 'Unix' ">     ...

  9. 记一次内存飙升的Windbg

    背景 突然间接到运维的报警,我们一个服务,内存找过了6GB的占用.才6GB 也不是很大,因为在处理别的事情,服务dump一下暂时一放,然后半小时之后,接到了运维的Kafka堆积报警.然后切换着重启了一 ...

  10. 调手表(bfs)

    题目描述 小明买了块高端大气上档次的电子手表,他正准备调时间呢.在 M78 星云,时间的计量单位和地球上不同,M78 星云的一个小时有 n 分钟.大家都知道,手表只有一个按钮可以把当前的数加一.在调分 ...