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,不多不少,出来了。

  • 相关阅读:
    mobx源码解读1
    表单元素之图形系
    koa2+koa-views示例
    avalon2的后端渲染实践
    向一个数组中插入元素
    一步步编写avalon组件02:分页组件
    avalon2学习教程15指令总结
    avalon2学习教程14动画使用
    WPF动态加载Menu菜单
    WPF自定义控件与样式 ---- 系列文章
  • 原文地址:https://www.cnblogs.com/invban/p/5127744.html
Copyright © 2011-2022 走看看