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

<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. Windows Phone 8初学者开发—第22部分：用演示图板创建卷盘的动画

    原文 Windows Phone 8初学者开发—第22部分:用演示图板创建卷盘的动画 第22部分: 用演示图板创建卷盘的动画 原文地址:http://channel9.msdn.com/Series/ ...

  2. 基于visual Studio2013解决C语言竞赛题之1004平均值

     题目 解决代码及点评 /************************************************************************/ /* 4. 编一个程序, ...

  3. JS图片上传后base64转码

    代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...

  4. 配置SAP 采购合同审批

    需求: 采购合同类型是MK,采购组织是POSC,采购组PGC,标识:估计价格是空,总价有值0.00 - 9999999999.00 RMB 满足以上条件的时候需要审批该合同. 配置: spro-> ...

  5. 4部门明确软件IC产业企业所得税优惠政策

    中国证券网讯 据财政部5月9日消息,财政部.国家税务总局.发展改革委.工业和信息化部联合发布关于软件和集成电路产业企业所得税优惠政策有关问题的通知.该通知自2015年1月1日起执行. 通知指出,按照& ...

  6. 正确处理Windows电源事件

    简介为系统挂起与恢复而进行的应用准备步骤 曾几何时,当您正要通过应用提交或发布一些重要数据时,突然遇到一些急事需要处理,而且会耽误很长时间.当您完成任务回到电脑前时,发现电脑已经自动进入 了挂起状态, ...

  7. could not create the java virtual machine(转)

    打开不了myeclipse,报错“could not create the java virtual machine”,解决问题过程如下: 1.在D:\MyEclipse\eclipse有个eclip ...

  8. ARM过程调用标准---APCS简单介绍

    介绍 APCS,ARM 过程调用标准(ARM Procedure Call Standard),提供了紧凑的编写例程的一种机制,定义的例程能够与其它例程交织在一起.最显著的一点是对这些例程来自哪里没有 ...

  9. NodeJS会是昙花一现吗？

    在用了一年以后,我感觉node.js有一点不正确劲.它非常有意思,可是我认为我应该用另外一个视角去审视它. 网络编程真的能够更easy吗? node.js无疑有一些设计很好的地方.前段时间我写了一个性 ...

  10. nginx+memcached+ftp上传图片+iis

    nginx+memcached+ftp上传图片+iis 自毕业以来,一直在现在公司做订餐系统的开发,那会儿没有口碑,没有饿了么,更别说美团外卖,百度外卖了...因为规模都比较小,都是一个服务器包含数据 ...