同事问我，咱们从数据库里面获取数据，用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. Android中attr自定义属性详解

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:wen=http ...

  2. Oracle 多版本控制

    SESSION 1: SQL> create table t 2 as 3 select * from all_users; Table created. SQL> variable x ...

  3. BZOJ 1030 [JSOI2007]文本生成器

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2624  Solved: 1087[Submit][Stat ...

  4. 数据结构（KD树）：HDU 4347 The Closest M Points

    The Closest M Points Time Limit: 16000/8000 MS (Java/Others)    Memory Limit: 98304/98304 K (Java/Ot ...

  5. 搜索(DLX)：HOJ 1017 - Exact cover

    1017 - Exact cover Time Limit: 15s Memory Limit: 128MB Special Judge Submissions: 6751 Solved: 3519 ...

  6. C语言的强制类型转换

    1.什么是强制类型转换:遇到一些类型不同的一些数据之间的表达运算 ,需要将较高的数据类型转换成较低类型时. 2.强制类型的形式: (强制转换的类型)(表达式): 2.强制类型的使用: float a, ...

  7. 高效算法——E - 贪心-- 区间覆盖

    E - 贪心-- 区间覆盖 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=85904#problem/E 解题思路: 贪心思想, ...

  8. mac下的改装人生——制作mac os 启动盘

    我即将开始对我的mac进行彻底的改造,现在还需要的是一个mac的启动盘或者启动光盘.由于没钱买mac的安装光盘或者安装盘,只能网上下了一个镜像自己做启动盘~ 需要:装有Mac Os的电脑,至少8g的u ...

  9. Swing实现文件选择（目录选择）附导出

    具体生成工具如图: (1) (2) (3) (4) 源码 : example.java package org.qiailin.jframe; import java.awt.Container; i ...

  10. 遍历Map的几种方法

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...