zoukankan      html  css  js  c++  java
  • php 与 ajax 获取123的案例

    同事问我,咱们从数据库里面获取数据,用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

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

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

     1 <?php
     2 // 用名字来填充数组
     3 $a[]="1";
     4 $a[]="2";
     5 $a[]="3";
     6 
     7 $hint="";
     8 for($i=0; $i<count($a); $i++)
     9 {    
    10     $hint=$hint."  ".$a[$i];
    11 }
    12 $response=$hint;
    13 //输出响应
    14 echo $response;
    15 ?>

    看一下界面:

    点击按钮:

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

  • 相关阅读:
    你不知道的JavaScript(上)this和对象原型(二)
    hihocoder 1566 皇室成员的名字
    csu 1756: Prime
    csu 1770: 按钮控制彩灯实验
    csu 1898: 复盘拉火车
    csu 1901: 赏赐 OR 灾难
    csu 1909: Perfect Chocolate
    csu 1958: 数字游戏
    symfony2 环境搭建笔记
    php preg_match($p, $str, $match)方法简介
  • 原文地址:https://www.cnblogs.com/invban/p/5127744.html
Copyright © 2011-2022 走看看