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

<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 对象
  • 当server响应就绪时运行函数
  • 把请求发送到server上的文件
  • 请注意我们向 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;

?>

效果

打包下载

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

  1. 简单的Ajax实例

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

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

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

  3. php中ajax使用实例

    php中ajax使用实例 一.总结 1.多复习:这两段代码都挺简单的,就是需要复习,要多看 2.ajax原理:ajax就是部分更新页面,其实还在的html页面监听到事件后,然后传给服务器进行操作,这里 ...

  4. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  5. AJAX 数据库实例

    AJAX 用于创建动态性更强的应用程序. AJAX ASP 实例 下面的例子将演示当用户在输入框中键入字符时,网页如何与服务器进行通信: 实例 请在下面的输入框中键入字母(A - Z): 姓名: 建议 ...

  6. 一个简单的Android小实例

    原文:一个简单的Android小实例 一.配置环境 1.下载intellij idea15 2.安装Android SDK,通过Android SDK管理器安装或卸载Android平台   3.安装J ...

  7. mongodb 简单部署方案及实例

    mongodb 简单部署方案及实例 转载:http://my.oschina.net/zhuzhu0129/blog/53290 第一节 准备工作 一 安装mongodb  我这里选用rehl 5.6 ...

  8. Linux下简单的socket通信实例

    Linux下简单的socket通信实例 If you spend too much time thinking about a thing, you’ll never get it done. —Br ...

  9. jQuery简单的Ajax调用示例

    jQuery确实方便,下面做个简单的Ajax调用: 建立一个简单的html文件: <!DOCTYPE HTML> <html> <head> <script ...

随机推荐

  1. c语言，数组和指针

    概要: 1.普通数组与指针 2.数组指针 3.指针的数组 数组是一个由(同一类型)连续元素组成的预先分配的内存块:指针是一个对任何位置的元素的引用. 数组自动分配空间,但不能重分配或改变大小:指针必须 ...

  2. 幻世（OurDream）2D图形引擎使用教程8——处理操作输入（2）

    声明:本教程版权归Lizcst Software Lab所有,欢迎转载,但是转载必须保留本段声明文字,并注明文章来源:http://blog.csdn.net/kflizcst 谢谢合作! 今天的教程 ...

  3. WCF技术剖析之七：如何实现WCF与EnterLib PIAB、Unity之间的集成

    原文:WCF技术剖析之七:如何实现WCF与EnterLib PIAB.Unity之间的集成 在这之前,我写过深入介绍MS EnterLib PIAB的文章(参阅<MS Enterprise Li ...

  4. 基于visual Studio2013解决面试题之1401冒泡排序

     题目

  5. Lisp学习:这是本质与应用？

    The Common Lisp Programming Language "The programming language of choice for those who set out ...

  6. mysql数据导出权限问题

    mysql数据导出的方法有非常多,比如mysqldump, mysql -e 'sql' > file, 这些都能够非常方便的导出数据,但是在使用普通用户导出数据的时候,出现了问题. 1 sel ...

  7. 用WebCollector制作一个爬取《知乎》并进行问题精准抽取的爬虫（JAVA）

    简单介绍: WebCollector是一个无须配置.便于二次开发的JAVA爬虫框架(内核),它提供精简的的API.仅仅需少量代码就可以实现一个功能强大的爬虫. 怎样将WebCollector导入项目请 ...

  8. HDU 2045 不easy系列之(3)—— LELE的RPG难题

    思路: 1.若前n-1位涂的颜色是符合条件的,则因为首尾不同,再加入一位时,仅仅有1种方法:即s[n] = s[n-1] 2.若前n-1位组成的串不符合,再加入一位后合法.即由于首尾同样而引起的不合法 ...

  9. 理解javascript中的for语句

    程序实现中经常要用到循环语句,其中for循环是多数语言都有的.在javascript中,for循环有几种不同的使用情况,下面就分别来讲述我的理解. 第一种:(通常情况,循环执行相关操作) var ob ...

  10. Swift - 内存泄露原因（循环强引用）及解决办法

    Swift使用自动引用计数(ARC)来管理应用程序的内存使用.在大多是情况下,并不需要考虑内存的管理.当实例不再需要的时候,ARC会自动释放这些实例所使用的内存. 但ARC并不是绝对安全的.下面两种情 ...