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

<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. mysql各版本区别

    MySQL 的官网下载地址:http://www.mysql.com/downloads/ 在这个下载界面会有几个版本的选择. 1. MySQL Community Server 社区版本,开源免费, ...

  2. python中文utf8编码后是占3个字符,unicode汉字为2字节

    一个中文utf8编码后是占3个字符,所以求长度的函数可以这样写 def str_len(str): try: row_l=len(str) utf8_l=len(str.encode('utf-8') ...

  3. 基于visual Studio2013解决算法导论之006最大堆排序

     题目 最大堆排序 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> #i ...

  4. 基于visual Studio2013解决C语言竞赛题之0609矩阵处理

     题目

  5. JQuery学习(3)

    创建精灵界面导航: 有以下图,合理的布局让图片正确显示: 先写导航栏html代码: <div id="navMenu"> <ul id="spriteN ...

  6. PHP - 验证类

    <?php /** * 验证类 * * @lastmodify 2014-5-16 * @author jy625 */ class VerifyAction{ /** * 是否为空值 */ p ...

  7. BZOJ 1486: [HNOI2009]最小圈( 二分答案 + dfs判负圈 )

    二分答案m, 然后全部边权减掉m, 假如存在负圈, 那么说明有平均值更小的圈存在. 负圈用dfs判断. ------------------------------------------------ ...

  8. 在Windows下编译OpenSSL（VS2005和VC6）

    需要说明的是请一定安装openssl-0.9.8a .  openssl-1.0.0我没有编译成功. 如何在Windows下编译OpenSSL (Vs2005使用Vc8的cl编译器)1.安装Activ ...

  9. Servlet的学习（四）

    在本篇的Servlet的学习中,主要来学习由使用MyEclipse来开发Servlet的一些小细节. 细节一:在web.xml中可以对同一个Servlet配置多个对外访问路径,并如果在web.xml中 ...

  10. EF连接MySQL数据Web.Config配置

    EF连接MySQL数据Web.Config配置 <?xml version="1.0" encoding="utf-8"?> <configu ...