同事问我，咱们从数据库里面获取数据，用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. 【原生态跨平台：ASP.NET Core 1.0(非Mono)在 Ubuntu 14.04 服务器上一对一的配置实现-篇幅1】

    鸡冻人心的2016,微软高产年. build 2016后 各种干货层出不穷. 1 Win10 集成了bash  ,实现了纳德拉的成诺,Microsoft Love Linux!!! 2 跨平台  ,收 ...

  2. Lua参考手册

    英文原版: http://www.lua.org/manual/5.1/ 中文版下面2个地址都有:一样的 manual.luaer.cn lua在线手册 lua参考手册Lua参考手册的中文翻译(云风翻 ...

  3. java学习面向对象之设计模式之单例模式

    就像上一节当中我们讲到的数组工具集一样,如果我们把他看作一个类,来应用,不阻止他new函数的话,这个类我们在整个过程当中我们只是用他来当一个工具.假如每次用都要new一下产生一个新对象的话,就会显得整 ...

  4. Vim默认保存文件路径的设置

    在_vimrc文件中添加: exec 'cd ' . fnameescape('F:\') F:\ 换成自己所需的路径,这样在vim中新建文件后直接用命令“ :w 文件名”就可以自动保存到已定义的路径 ...

  5. POJ3087 Shuffle'm Up(模拟)

    题目链接. AC代码如下; #include <iostream> #include <cstdio> #include <cstring> #include &l ...

  6. 【模拟】NEERC15 A Adjustment Office (2015-2016 ACM-ICPC)(Codeforces GYM 100851)

    题目链接: http://codeforces.com/gym/100851 题目大意: 一个N*N的矩阵A,Ai,j=i+j,Q次操作,每次分两种,R r取出第r行还未被取的所有数,并输出和.C c ...

  7. hibernate生成查询语句但查不到数据

    hibernate能够生成查询语句 说明它已经进行了查询操作 返回结果数据记录为0  很可能出现的情况 是  :该查询未未访问到指定数据库表. 当使用的数据库为oracle数据库时,你会在bean配置 ...

  8. 424. Longest Repeating Character Replacement

    以最左边为开始,往右遍历,不一样的个数大于K的时候停止,回到第一个不一样的地方,以它为开始,继续.. 用QUEUE记录每次不一样的INDEX,以便下一个遍历开始, 从左往右,从右往左各来一次..加上各 ...

  9. JDBC 之 事务

    1.概念:事务指逻辑上的一组操作,组成这组操作的各个单元,要么全部成功,要么全部不成功. 2.数据库开启事务的命令dtl: Start transaction开启事务 Rollback回滚事务(撤销) ...

  10. Android监听ScrollView滑动到顶端和底部

    Android监听ScrollView滑动到顶端和底部     package cn.testscrollview; import android.os.Bundle; import android. ...