使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）
- 首先你要有php的环境，关于php环境的搭建，php本地站点的搭建，此处不再重复请看这里：http://www.cnblogs.com/Gabriel-Wei/p/5950465.html
我们把wamp打开，并且在Dreamweaver里面新建一个phpStudy站点。
这篇文章我们需要两个文件，一个test.html前端的页面，一个tigong.php数据的提供页，下面分别进行介绍。 - tigong.php
我们在Dreamweaver,phpStudy站点下面，新建一个tigong.php页面，里面内容如下：<?php
echo"hello Tom";
?>为了让里面支持中文，我们加入这句话header("content-type:text/html;charset=utf-8")，此时的tigong.php如下
<?php
header("content-type:text/html;charset=utf-8");
echo"Hello 李明";
？>用我们的浏览器跑一下，如图：
将地址栏的信息地址复制一份，用postman测一下数据，如果不知道什么是postman，请自行百度，后面的数据交互文章会一直用到postman。（简而言之，postman就是测试一下给的接口能不能正常接收数据），如图：
tigong.php文件准备好了，接下来我们写我们的前端页面。 - test.html 我们设置为点击按钮获取数据
<!doctype html>
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var bt1=document.getElementById("bt1");
var div1=document.getElementById("div1");
//给bt1绑定事件，一会做onload完毕以后装在数据
bt1.onclick=function(){
//第一步：创建ajax对象
//写兼容
if(window.XMLHttpRequest){
var xmlHttp=new XMLHttpRequest();
}else{
//兼容IE6
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
//第二步：获取要放送的数据。这个例子没有
//第三步：设置一下要发送的方式和请求目标地址
xmlHttp.open("GET","tigong.php");
//第三个参数不写默认是异步 //第四步：设置请求的编码
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //第五步：监控整个过程，绑定onreadystatechange事件，总共调了四次0-1.1-2.2-3.3-4，我们需要的是4和200
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4 && xmlHttp.status==200){
//后台数据输出什么，我们的responseText就得到什么
div1.innerHTML=xmlHttp.responseText;
}
};
//第六步：发送请求
xmlHttp.send();
};
};
</script>
<meta charset="utf-8">
<style>
#div1{
background:#f00;
color:#fff;
font-weight:bold;
width:200px;
height:200px;
}
img{
width:200px;
}
</style>
<title>ajax</title>
</head>
<div id="div1">
<!--在数据没有过来的时候，我们显示一张loading的图片，百度搜loading一大推-->
<img src="data:images/1.gif">
</div><br>
<input type="button" id="bt1" value="点击获取数据">
<body>
</body>
</html>如图所示：
点击之后：
可以看到，我们的php页面里面的数据回来了。
- 查看一下chrome的开发工具
在network监控里面选择all，可以查看所有文件，如果没有，就刷新一下页面，
点击tigong.php
使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）的更多相关文章
- js - 原生ajax访问后台读取数据并显示在页面上
1.前台调用ajax访问后台方法,并接收数据 <%@ page contentType="text/html;charset=UTF-8" language="ja ...
- 用ajax获取后台数据，返回json数据，怎么在前台使用？
用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...
- js页面用定时任务通过AJAX获取后台数据，但是从这个页面跳转到其他页面后，定时任务仍然在定时请求后台
setInterval(function(){//ajax 请求后台数据},1000);这个是A页面的定时器然后我在A页面通过其他请求跳转到其他页面之后后台发现A页面的定时器的那个请求仍然在执行为什么 ...
- 前台返回json数据的常用方式+常用的AJAX请求后台数据方式
我个人开发常用的如下所示: 之所以像下面这样下,一是前台Ajax,二是为安卓提供接口数据 现在常用的是返回JSON数据,XML的时代一去不复返 JSON相对于XML要轻量级的多 对JSON不是十分熟悉 ...
- JS 操作 HTML 和 AJAX 请求后台数据
为某个元素插入值,添加属性,添加子元素 <div class="col-sm-6"> <select class="form-control" ...
- ajax 请求后台数据返回异常 及 提示404方法名不存在
1.正常使用 Ajax 调取后台数据时,提示方法名不存在,Ajax前端正常,方法类bean注入正常,方法注解正常.但参数解析时出现异常. @RequestMapping(value="/ge ...
- jquery中ajax请求后台数据成功后既不执行success也不执行error解决方法
jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ...
- Ajax请求后台数据
一.前期准备 安装好XAMPP软件,并运行起来.本文代码是基于XAMPP开发环境,XAMPP是完全免费且易于安装的Apache发行版,其中包含MariaDB.PHP和Perl.XAMPP开放源码包的设 ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(2)-easyui构建前端页面框架[附源码] 开始,我们有了一系列的解决方案,我们将动手搭建新系统吧. 用 ...
随机推荐
- Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示
注:本博文为博主原创,转载请注明出处. 在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定 ...
- 数据结构图文解析之：树的简介及二叉排序树C++模板实现.
0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...
- Leetcode 285. Inorder Successor in BST
Given a binary search tree and a node in it, find the in-order successor of that node in the BST. 本题 ...
- openerp7 时区问题
由于目前openerp 的时区,读取的是UTC 时间,而我国本地时间比UTC 快8小时,这个问题就导致:写入数据库的时候时间相差8小时,以及Openerp日志输出时间格式也相差8小时和 前端显示时间的 ...
- CocoaPods第三方库管理 iOS
越来越多的SVN管理,越来越多的工程文件,我不能总是那么一个一个的把第三方库拖进去,我厌倦了拖拽和配置,我找到了替代方法--CocoaPods 补充一下:最近在给新机子安装时 发现 sudo gem ...
- LogStash配置、使用（三）
LogStash配置 官方文档:https://www.elastic.co/guide/en/logstash/current/index.html 查看yum安装路径 rpm -ql logsta ...
- Simple Network Management Protocol - SNMP Tutorial
30.9 Simple Network Management Protocol Network management protocols specify communication between t ...
- apache启动出错原因举例
这是我这两天频繁遇到的问题.Apache服务器还真是问题少年!任何点改动都可能导致它无法使用. 原因一:80端口占用例如IIS,另外就是迅雷.我的apache服务器就是被迅雷害得无法启用! 原因二:软 ...
- 大熊君学习html5系列之------requestAnimationFrame（实现动画的另一种方案）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...
- 大熊君学习html5系列之------History API（SPA单页应用的必备------重构完结版）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...