Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 157427
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
ajax的简单实现（后台为PHP）

分类： JavaScript

2016-03-10 16:44:45

HTML代码

点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="zh-ch">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Ajax</title>
  6.   <style type="text/css">
  7.   #text{
  8.    height: 28px;
  9.   }
  10.   e{
  11.     position: relative;
  12.     display: inline-block;
  13.     height: 28px;
  14.     line-height: 28px;
  15.     background:#eee;
  16.     cursor: pointer;
  17.     top:2px;
  18.   }
  19.   e:hover{
  20.     background: #bbb;
  21.   }
  22.   </style>
  23.   <script type="text/javascript">
  24.   function show(str){
  25.    var xmlhttp;
  26.    if(str.length==0){
  27.     document.getElementById("data").inderHTML="";
  28.     return;
  29.    }
  30.    if(window.XMLHttpRequest){
  31.     xmlhttp=new XMLHttpRequest();
  32.    }
  33.    else{
  34.     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  35.    }
  36.    xmlhttp.onreadystatechange=function(){
  37.     if(xmlhttp.readyState==4&&xmlhttp.status==200){
  38.       document.getElementById("data").innerHTML=xmlhttp.responseText;
  39.     }
  40.    }
  41.    xmlhttp.open("GET","ajaxdemo.php?qqq="+str,true);
  42.    xmlhttp.send()
  43.   }
  44.   </script>
  45. </head>
  46. <body>
  47.   <h1>异步Javascript和Xml之搜索引擎</h1>
  48.   <input type="search" onkeyup="show(this.value)"><e>搜索</e>
  49.   <p>你是否要查找：<span id="data"></span></p>
  50. </body>
  51. </html>
PHP代码

点击(此处)折叠或打开

  1. <?php
  2. $a=array("人","人生","人生在于奋斗","赵薇","赵永卫","赵珂","php","python","html","xhtml");//创建新数组作为搜索的数据库
  3. $q=$_GET["qqq"];//以get方式得到传来的数据，qqq为"ajaxdemo.php?qqq+str"中传来的值.
  4. if (strlen($q) > 0)
  5.   {
  6.   $data="";
  7.   for($i=0; $i<count($a); $i++)
  8.     {
  9.     if ($q==substr($a[$i],0,strlen($q)))//判断值是否和数据库中数据匹配，匹配的话就获取该数据
  10.       {
  11.       if ($data=="")
  12.         {
  13.         $data=$a[$i];
  14.         }
  15.       else
  16.         {
  17.         $data=$data." , ".$a[$i];
  18.         }
  19.       }
  20.     }
  21.   }
  22. if ($data == "")//没有匹配上
  23.   {
  24.   $response="查不到此数据";
  25.   }
  26. else
  27.   {
  28.   $response=$data;
  29.   }
  30. echo $response;//返回匹配上的数据给客户端
  31. ?>
截图为
阅读(1207) | 评论(0) | 转发(0) |
0

上一篇：JS实现新闻条垂直无缝滚动

下一篇：浏览器兼容问题之IE6篇

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6