这次给大家带来AJax怎样实现搜索栏,AJax实现搜索栏的注意事项有哪些,下面就是实战案例,一起来看一下。
实习过程中需要用到异步提交功能,于是试着去了解了一下ajax,瞬间感觉以前学习的真是九牛一毛啊,确实如此,做web应用开发,如果不会jquery和ajax,那真的就是白学了,了解之后我才感觉网上的那些花哨的功能已经都可以实现了。
话不多说,下面有ajax实现一个简单的百度搜索栏的功能,当用户在上面的输入框中键入字符时,会执行函数 "showHint()" 。该函数由 "onkeyup" 事件触发:
function showHint(str) { var xmlhttp; if (str.length==0) { document.getElementByIdx_x("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.asp?q="+str,true); xmlhttp.send(); }
源代码解释:
如果输入框为空 (str.length==0),则该函数清空 txtHint 占位符的内容,并退出函数。
如果输入框不为空,showHint() 函数执行以下任务:
创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q (带有输入框的内容)
请求的文件是用php来写的,当然用什么都可以,和一般的页面没有本质的区别:
<?php // 用名字来填充数组 $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona"; $a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //获得来自 URL 的 q 参数 $q=$_GET["q"]; //如果 q 大于 0,则查找数组中的所有提示 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } } } // 如果未找到提示,则把输出设置为 "no suggestion" // 否则设置为正确的值 if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //输出响应 echo $response; ?>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是AJax怎样实现搜索栏的详细内容。更多信息请关注PHP中文网其他相关文章!