使用ajax+php模仿google功能源码
程序员文章站
2023-12-27 19:06:45
...
模仿google搜索栏功能的效果 源代码如下: 以下是引用片段: // 原创作品 本站原创:www.111cn.cn 作者:面条爱兔子QQ:271728967 // 现在长沙下着大雪啊,晚上回家也没什么事作,白天在公司写一个BBS完成了一部份,突然昨天听一个网友说如果能实现google效果就好
模仿google搜索栏功能的效果
源代码如下:
以下是引用片段: // 原创作品 本站原创:www.111cn.cn 作者:面条爱兔子 QQ:271728967 // 现在长沙下着大雪啊,晚上回家也没什么事作,白天在公司写一个BBS完成了一部份,突然昨天听一个网友说如果能实现google效果就好了,今天无聊之下就想了想,觉得这个用ajax做应该不是什么难道了,就试着写了,说句实话我学ajax时间很短,也只懂皮毛了,各位看了后别丢石头了,把钱包丢过来吧,过年没钱用,;)呵呵.好了废话就不多说了下面进行正题. 首先我总体的简介一下,我只用了两个文件了,因为是测试所以就不分那么清楚了,把js文件和html写在一个文件test.html里面了,还有一个就是php文件post.php了,这个文件用来处理ajax发送过来的数进行处理,再由ajax把数据返回给test.html里面的div, 原理不这么简单了,下面我们来看代码. 第一步创建数据表:test CREATE TABLE `test` ( `id` int(4) NOT NULL auto_increment, `title` varchar(50) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=gb2312 AUTO_INCREMENT=5 ; 好了数据库创建成功了我们就来建立test.html文件,这个文件很简单,就是一个表单和一个div和CSS 上面为CSS了就是用来控制效果的, 这上面为内容了,关于函数我们下面来具体的说明. 第二步:就是js和xmlhttp的处理和调用了. 创建xmlhttp,这个函数我上次讲ajax+php模仿window文件管理器时讲过了,在用户注册也讲过了,这里不不说了,具体地址请到: var xmlHttp = false; function ajaxcreate(){ try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } if (!xmlHttp && typeof XMLHttpRequest != \\\’undefined\\\’) { xmlHttp = new XMLHttpRequest(); } if(!xmlHttp){alert(\\\’Create Xmlhttp Fail \\\’);return false;} } 下面这个函数sugguest()作用是取得key的值并发送给post文件进行处理,再调用returnstate()函数 function sugguest(){ ajaxcreate(); var xmvalue=document.getElementById("key").value; var url="post.php?key="+encodeURI(xmvalue)+"rnd="+Math.random(); if (xmvalue== null || xmvalue.length>20 || xmvalue == "") return false; xmlHttp.open("POST",url,true); xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xmlHttp.send(xmvalue); xmlHttp.onreadystatechange=returnstate; } 下面returnstate()函数是判断xmlhttp的状态是否等4,4表示发送成功,其实还一个200表示接收完毕 function returnstate(){ if(xmlHttp.readyState != 4 ){ document.getElementById("sug").innerHTML="plase wait...."; } if(xmlHttp.readyState == 4 ){ document.getElementById("sug").innerHTML=xmlHttp.responseText; } } 后面这些函数就是一些基本的处理我就不讲了, function fillin(str){ document.getElementById(\\\’key\\\’).value=str; obj =document.getElementById(\\\’sug\\\’); obj.innerHTML=\\\’\\\’; obj.style.display=\\\’none\\\’; } function other(){ document.getElementById(\\\’sug\\\’).style.display=\\\’block\\\’; } function losefouse(){ setInterval("func()",4000); var time=setInterval("func()",1000); clearTimeout(time); } function func(){ ob=document.getElementById(\\\’sug\\\’); ob.style.display = \\\’none\\\’; } 现在来讲一下post.php文件了,post.php文件很简单,这个不一定用php可以用很多,只要是服务器脚都可以完成,{个人意见} header("Content-type:text/html;charset=gb2312");我只说讲这一句了,设置文档编码. $key =isset($_POST[’key’])?$_POST[’key’]:’’; $sql ="select title from test where title like ’%$key%’ order by title desc"; $result =mysql_query($sql) or die(mysql_error()); echo" "; ";while ($rs =mysql_fetch_array($result) ){ echo " } echo" |
推荐阅读
-
使用ajax+php模仿google功能源码
-
使用Java实现系统托盘功能的介绍(附源码以及截图)
-
使用Java实现系统托盘功能的介绍(附源码以及截图)
-
python使用xmlrpclib模块实现对百度google的ping功能
-
PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】 原创
-
微信小程序使用progress组件实现显示进度功能【附源码下载】
-
微信小程序使用radio显示单选项功能【附源码下载】
-
微信小程序使用input组件实现密码框功能【附源码下载】
-
全面解析Google AdWords谷歌关键字广告的功能及其使用教程
-
微信小程序使用checkbox显示多项选择框功能【附源码下载】