点击(此处)折叠或打开
- <!DOCTYPE html>
- <html lang="zh-ch">
- <head>
- <meta charset="UTF-8">
- <title>Ajax</title>
- <style type="text/css">
- #text{
- height: 28px;
- }
- e{
- position: relative;
- display: inline-block;
- height: 28px;
- line-height: 28px;
- background:#eee;
- cursor: pointer;
- top:2px;
- }
- e:hover{
- background: #bbb;
- }
- </style>
- <script type="text/javascript">
- function show(str){
- var xmlhttp;
- if(str.length==0){
- document.getElementById("data").inderHTML="";
- return;
- }
- if(window.XMLHttpRequest){
- xmlhttp=new XMLHttpRequest();
- }
- else{
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function(){
- if(xmlhttp.readyState==4&&xmlhttp.status==200){
- document.getElementById("data").innerHTML=xmlhttp.responseText;
- }
- }
- xmlhttp.open("GET","ajaxdemo.php?qqq="+str,true);
- xmlhttp.send()
- }
- </script>
- </head>
- <body>
- <h1>异步Javascript和Xml之搜索引擎</h1>
- <input type="search" onkeyup="show(this.value)"><e>搜索</e>
- <p>你是否要查找：<span id="data"></span></p>
- </body>
- </html>
点击(此处)折叠或打开
- <?php
- $a=array("人","人生","人生在于奋斗","赵薇","赵永卫","赵珂","php","python","html","xhtml");//创建新数组作为搜索的数据库
- $q=$_GET["qqq"];//以get方式得到传来的数据，qqq为"ajaxdemo.php?qqq+str"中传来的值.
- if (strlen($q) > 0)
- {
- $data="";
- for($i=0; $i<count($a); $i++)
- {
- if ($q==substr($a[$i],0,strlen($q)))//判断值是否和数据库中数据匹配，匹配的话就获取该数据
- {
- if ($data=="")
- {
- $data=$a[$i];
- }
- else
- {
- $data=$data." , ".$a[$i];
- }
- }
- }
- }
- if ($data == "")//没有匹配上
- {
- $response="查不到此数据";
- }
- else
- {
- $response=$data;
- }
- echo $response;//返回匹配上的数据给客户端
- ?>