原文: http://www.ido321.com/347.html

从网页前端输入提示范围内的字符，然后显示从后台返回的结果

   1: <html>

   2: <head>

   3: <meta http-equiv="content-type" content="text/html;charset=utf-8">

   4: <script type="text/javascript">

   5: function showHint(str)

   6: {

   7: var xmlhttp;

   8: if (str.length==0)

   9:   { 

  10:   document.getElementById("txtHint").innerHTML="";

  11:   return;

  12:   }

  13: if (window.XMLHttpRequest)

  14:   {// code for IE7+, Firefox, Chrome, Opera, Safari

  15:   xmlhttp=new XMLHttpRequest();

  16:   }

  17: else

  18:   {// code for IE6, IE5

  19:   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  20:   }

  21: xmlhttp.onreadystatechange=function()

  22:   {

  23:   if (xmlhttp.readyState==4 && xmlhttp.status==200)

  24:     {

  25:     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

  26:     }

  27:   }

  28: xmlhttp.open("GET","ajax.php?q="+str,true);

  29: xmlhttp.send();

  30: }

  31: </script>

  32: </head>

  33: <body>

  34:  

  35: <h3>请在下面的输入框中键入字母（A - Z）：</h3>

  36: <form action=""> 

  37: 姓氏：<input type="text" id="txt1" onkeyup="showHint(this.value)" />

  38: </form>

  39: <p>建议：<span id="txtHint"></span></p> 

  40:  

  41: </body>

  42: </html>

如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。

如果输入框不为空，showHint() 函数执行以下任务：

  • 创建 XMLHttpRequest 对象
  • 当服务器响应就绪时执行函数
  • 把请求发送到服务器上的文件
  • 请注意我们向 URL 添加了一个参数 q （带有输入框的内容）

php：

   1: <?php

   2: // 用名字来填充数组

   3: $a[]="Anna";

   4: $a[]="Brittany";

   5: $a[]="Cinderella";

   6: $a[]="Diana";

   7: $a[]="Eva";

   8: $a[]="Fiona";

   9: $a[]="Gunda";

  10: $a[]="Hege";

  11: $a[]="Inga";

  12: $a[]="Johanna";

  13: $a[]="Kitty";

  14: $a[]="Linda";

  15: $a[]="Nina";

  16: $a[]="Ophelia";

  17: $a[]="Petunia";

  18: $a[]="Amanda";

  19: $a[]="Raquel";

  20: $a[]="Cindy";

  21: $a[]="Doris";

  22: $a[]="Eve";

  23: $a[]="Evita";

  24: $a[]="Sunniva";

  25: $a[]="Tove";

  26: $a[]="Unni";

  27: $a[]="Violet";

  28: $a[]="Liza";

  29: $a[]="Elizabeth";

  30: $a[]="Ellen";

  31: $a[]="Wenche";

  32: $a[]="Vicky";

  33:  

  34: //获得来自 URL 的 q 参数

  35: $q=$_GET["q"];

  36:  

  37: //如果 q 大于 0，则查找数组中的所有提示

  38: if (strlen($q) > 0)

  39:   {

  40:   $hint="";

  41:   for($i=0; $i<count($a); $i++)

  42:     {

  43:     if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))

  44:       {

  45:       if ($hint=="")

  46:         {

  47:         $hint=$a[$i];

  48:         }

  49:       else

  50:         {

  51:         $hint=$hint." , ".$a[$i];

  52:         }

  53:       }

  54:     }

  55:   }

  56:  

  57: // 如果未找到提示，则把输出设置为 "no suggestion"

  58: // 否则设置为正确的值

  59: if ($hint == "")

  60:   {

  61:   $response="no suggestion";

  62:   }

  63: else

  64:   {

  65:   $response=$hint;

  66:   }

  67:  

  68: //输出响应

  69: echo $response;

  70: ?>

效果

打包下载

初识Ajax---简单的Ajax应用实例的更多相关文章

  1. 简单的Ajax实例

    由于刚刚接触Ajax,所以在网上搜了一下如何实现简单的Ajax,在此写下来,也方便自己以后学习 什么是Ajax? 通过在后台与服务器进行少量的数据交换,Ajax可以使网页实现异步更新,这意味着可以在不 ...

  2. thinkphp5最最最最简单的ajax实例

    thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...

  3. Ajax 简单的实例代码

    <!DOCTYPE HTML><html><head><script src="http://libs.baidu.com/jquery/2.0.0 ...

  4. 原生AJAX入门讲解（含实例）

    相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...

  5. Ajax获得站点文件内容实例

    一个简单的Ajax实例:选择一部著作,会通过 Ajax 实时获得相关的名字. 把4个html文件放到 web站点 的同一个文件下. index.html <html> <head&g ...

  6. Ajax得知（两）—— 一个简单的Ajax示例

    通过部分博客认识Ajax之后,我们通过一个简单的实例来消化消化理论知识,一睹Ajax的庐山真面目. 1.实例功能: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...

  7. AJAX 简单归纳 -- 前端知识

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  8. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  9. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  10. PHP 实例 - AJAX 实时搜索-AJAX Live Search

    PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好.交互性更强的搜索体验. AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...

随机推荐

  1. 使用Unity拦截一个返回Task的方法

    目标 主要是想为服务方法注入公用的异常处理代码,从而使得业务代码简洁.本人使用Unity.Interception主键来达到这个目标.由于希望默认就执行拦截,所以使用了虚方法拦截器.要实现拦截,需要实 ...

  2. 弹窗开关js

    // var guanbi = false; // $("#testbtn").click(function(){ // if(guanbi){ // $("#tan&q ...

  3. PAT-乙级-1014. 福尔摩斯的约会 (20)

    1014. 福尔摩斯的约会 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大侦探福尔摩斯接到一张奇怪的 ...

  4. 转Spring+Hibernate+EHcache配置（三）

    配置每一项的详细作用不再详细解释,有兴趣的请google下 ,这里需要注意一点defaultCache标签定义了一个默认的Cache,这个Cache是不能删除的,否则会抛出No default cac ...

  5. 在smarty模板中嵌入php代码

    我个人并不太喜欢smarty的语法,写起来比较啰嗦易出现匹配出错,但是旧项目中有许多工程都是采用它作模板.最近需要在此上稍微加一些PHP的内容,但我不想在模板控制层去一个一个assign,而想在模板文 ...

  6. IOS xib生成界面和代码生成界面两种方式混合

    应用程序代理类 WKAppDelegate.m // // WKAppDelegate.m // HelloWorld // // Created by easy5 on 13-9-18. // Co ...

  7. cf 148D 概率DP

    题意:原来袋子里有w只白鼠和b只黑鼠龙和王妃轮流从袋子里抓老鼠.谁先抓到白色老师谁就赢.王妃每次抓一只老鼠,龙每次抓完一只老鼠之后会有一只老鼠跑出来.每次抓老鼠和跑出来的老鼠都是随机的.如果两个人都没 ...

  8. SGU128 Snake

    SGU128,题意是给定N个点,问说能不能形成一个闭环G,要求G经过每个点,且在每个点处都有90度的转角,且不能出现自交. 没想出来,通过这提供的思路,由于每个点处都需要90度的转弯,因此每个点处必然 ...

  9. Java对象相关元素的初始化过程

    1.类的成员变量.构造函数.成员方法的初始化过程 当一个类使用new关键字来创建新的对象的时候,比如Person per = new Person();JVM根据Person()寻找匹配的类,然后找到 ...

  10. haproxy 规则匹配到了就停止,不会继续匹配下一个

    acl url_web_wwm path_beg -i /scan use_backend zjtest7_com if url_web_wwm acl url_static path_end .ht ...