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. ?>
截图为
ajax的简单实现(后台为PHP)-LMLPHPajax的简单实现(后台为PHP)-LMLPHP
10-05 20:35