同事问我,咱们从数据库里面获取数据,用ajax的方式展示到前台页面。啥都不说了,动手写个案例吧。

1,建立一个页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script type="text/javascript" src="ajax.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Ajax demo</title>
</head>
<body>
  <input type="button" id="txt1" onclick="showHint()" value="获取123"/>
  <p>数字:<span id="txtHint"></span></p>
</body>
</html>

2.写一个js,就是ajax

 var xmlhttp;
function showHint()
{
// 定义新的数组
var array = new Array();
// 创建XMLHttpRequest对象
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari 现代浏览器
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5 用户低版本ie
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} // 设置请求类型,请求地址,以及是否启用异步处理请求,大多数设置开启 true
xmlhttp.open("GET","gethint.php",true);
// 将请求发送至服务器
xmlhttp.send();
// 处理onreadystatechange事件 我们规定当服务器响应已做好被处理的准备时所执行的任务
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
}

3,好吧,写一个php吧,当成服务器。数据是假的。

 <?php
// 用名字来填充数组
$a[]="1";
$a[]="2";
$a[]="3"; $hint="";
for($i=0; $i<count($a); $i++)
{
$hint=$hint." ".$a[$i];
}
$response=$hint;
//输出响应
echo $response;
?>

看一下界面:

点击按钮:

1,2,3,不多不少,出来了。

php 与 ajax 获取123的案例的更多相关文章

  1. JavaScript 在函数中使用Ajax获取的值作为函数的返回值

    解决:JavaScript 在函数中使用Ajax获取的值作为函数的返回值,结果无法获取到返回值 原因:ajax默认使用异步方式,要将异步改为同步方式 案例:通过区域ID,获取该区域下所有的学校 var ...

  2. vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全

    https://segmentfault.com/q/1010000005618139 vue ajax获取数据的时候,如何保证传递参数的安全或者说如何保护api的安全 点击提交,发送请求.但是api ...

  3. Ajax获取 Json文件提取数据

    摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...

  4. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  5. 放养的小爬虫--京东定向爬虫(AJAX获取价格数据)

    放养的小爬虫--京东定向爬虫(AJAX获取价格数据) 笔者声明:只用于学习交流,不用于其他途径.源代码已上传github.githu地址:https://github.com/Erma-Wang/Sp ...

  6. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  7. vue 中使用 AJAX获取数据的方法

    在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...

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

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

  9. ajax获取json对象

    ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...

随机推荐

  1. Delphi 指针大全(光看不练是学不会的)

    大家都认为,C语言之所以强大,以及其自由性,很大部分体现在其灵活的指针运用上.因此,说指针是C语言的灵魂,一点都不为过.同时,这种说法也让很多人产生误解,似乎只有C语言的指针才能算指针.Basic不支 ...

  2. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  3. JavaScript+CSS实现经典的树形导航栏

    在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于 ...

  4. org.springframework.beans.BeanUtils

    org.springframework.beans.BeanUtils的一个demo.可以很优雅的实现将父类字段的值copy到子类中 下面例子的输出结果(子类使用父类的toString方法,有点意思吧 ...

  5. 【转】JNI 对象处理

    原文网址:http://leidiqiu.iteye.com/blog/720307 JNI 的基本问题就是解决 Java 和 C++ 代码互相调用的通信问题,在 C++ 代码编写过程中最大的问题莫过 ...

  6. oracle 表查询(2)

    使用逻辑操作符号 问题:查询工资高于500 或者是岗位为MANAGER 的雇员,同时还要满足他们的姓名首字母为大写的J? or job = 'MANAGER') and ename LIKE 'J%' ...

  7. QTP关于AOM的Javascript启动方式

    序 QTP的AOM模型想必大家都很熟悉了,平时常用的就是通过VBS脚本的方式编写启动程序(也是我现在用的方法).其实,还有很多其他的方式,如Java,C#,JS,这些语言都是通过调用QTObjectM ...

  8. N-Queens II——Leetcode

    Follow up for N-Queens problem. Now, instead outputting board configurations, return the total numbe ...

  9. 科研论文提交流程与常见问题(EDAS 系统提交)

    第一步 注册文章(Registering your Paper) 如上图,点击菜单中的submit paper按钮,会列出所有的会议和期刊,选择一个你要投稿的期刊或者会议,例如选择第一个2013 IE ...

  10. [置顶] ruby变量详解(收集+整理)

    ruby的变量有局部变量,全局变量,实例变量,类变量,常量. 1.局部变量 局部变量以一个小写字母开头或下划线开头 局部变量有局部作用域限制(比如一个block内),它的作用域起始于声明处,结束于该声 ...