简单的Ajax应用实例
来源:互联网 发布:打拐dna数据库 编辑:程序博客网 时间:2024/05/19 21:03
从网页前端输入提示范围内的字符,然后显示从后台返回的结果
<html><head><meta http-equiv="content-type" content="text/html;charset=utf-8"><script type="text/javascript">function showHint(str){var xmlhttp;if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; }if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } }xmlhttp.open("GET","ajax.php?q="+str,true);xmlhttp.send();}</script></head><body><h3>请在下面的输入框中键入字母(A - Z):</h3><form action=""> 姓氏:<input type="text" id="txt1" onkeyup="showHint(this.value)" /></form><p>建议:<span id="txtHint"></span></p> </body></html>
如果输入框为空 (str.length==0),则该函数清空 txtHint 占位符的内容,并退出函数。
如果输入框不为空,showHint() 函数执行以下任务:
- 创建 XMLHttpRequest 对象
- 当服务器响应就绪时执行函数
- 把请求发送到服务器上的文件
- 请注意我们向 URL 添加了一个参数 q (带有输入框的内容)
<?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;?>
效果
打包下载
0 0
- 简单的Ajax应用实例
- Ajax应用简单实例
- jQuery.ajax的简单应用实例
- jQuery.ajax的简单应用实例 附实例下载
- jQuery.ajax的简单应用实例 附实例下载
- Ajax项目应用简单实例
- 简单的ajax实例
- 简单的Ajax实例
- ajax的简单应用
- ajax的简单应用
- 简单的ajax应用
- ajax 的简单应用.
- 简单的Ajax应用
- Ajax的简单应用
- ajax 的简单应用
- Ajax的简单应用
- ajax的简单应用
- ajax的简单应用
- 深入理解C/C++ [Deep C (and C++)] (1)
- vlc-android 移植live555到android
- Swift学习——格式控制符和元组流程控制(二)
- vlc-android编译流程
- Enable Notepad++ 666 support both SCLEX_FORTRAN and SCLEX_F77
- 简单的Ajax应用实例
- 英联(UNION-IC)样片申请与经验
- mysql查看各个表的大小
- SurfaceHolder-----api的使用
- 迭代、递归解决斐波纳挈数列问题
- SDUT OJ -2892 A
- 子对话框与主对话框共用MSComm方法
- 程序员长期保持身心健康的几点建议
- SDUT OJ-2896