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

<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. cmake总结

    无论生活还是工作上,做过的事,需要总结下. 接触cmake,一般都会看一本书 <<cmake 实践>>. 这是cmake的入门书.我就不多说了. 下面说一下我对部分cmake命 ...

  2. bzoj 1030-1039

    1030 JSOI2007 文本生成器 AC自动机加DP即可. 1031 JSOI2007 字符加密Cipher 后缀数组即可. 1032 JSOI2007 祖码Zuma 数据有问题. 设\(f(l, ...

  3. 清华集训2014 day2 task1 简单回路

    题目 如题. 算法 就是刚学习的插头DP. 从前往后和从后往前分别进行一次DP. 要点 合法的括号序列只有103个 如何合并两次dp的信息 一开始犯傻了,以为当且仅当两个轮廓线的状态相同才是合法的方案 ...

  4. H3C HCSE 官方培训胶片(中文) 下载

    H3C HCSE 官方培训胶片(中文) 点击文件名下载 HM-040 OSPF路由协议(V5.1).ppt HM-041 BGP协议原理及配置(V5.0).ppt HM-041 BGP协议原理及配置( ...

  5. MSSQL - 创建新用户

    1.首先使用Windows身份验证登陆. 2.然后一次打开:安全性--->登录名.右键登录名,点击新建登录名. 3.常规选项卡下:填写登录名.选择SQL Server身份验证,填写登录名密码.取 ...

  6. 终于实现samba可写不可删除

    通过szxsztszk的提示 今天终于实现了linux可写不可删除的要求. 同时运用了POSIX ACL 我们公司的要求是这样的[color=Red](我只做出我公司要求的步骤,不同的要求,稍加改正即 ...

  7. 基于visual Studio2013解决面试题之0907大数乘法

     题目

  8. POJ 1042 Gone Fishing （贪心）（刘汝佳黑书）

    Gone Fishing Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 30281   Accepted: 9124 Des ...

  9. 体验魅力Cognos BI 10 系列，第1 部分: 第一次安装

    体验魅力Cognos BI 10 系列,第1 部分: 第一次安装吴敏达, 信息管理软件高级技术顾问, IBM简介: 本系列教程旨在帮助您通过实际动手掌握Cognos BI 10.1 的主要功能.在这一 ...

  10. MFC 在对话框显示图片的多种方法（四种方法）

    我们先从简单的开始吧.先分一个类: (一) 非动态显示图片(即图片先通过资源管理器载入,有一个固定ID) (二) 动态载入图片(即只需要在程序中指定图片的路径即可载入) 为方便说明,我们已经建好一个基 ...