简单的Ajax应用实例

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

<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, Safarixmlhttp=new XMLHttpRequest();}
else{// code for IE6, IE5xmlhttp=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" οnkeyup="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;
?>

效果

打包下载

转载于:https://www.cnblogs.com/hrhguanli/p/3957402.html

简单的Ajax应用实例相关推荐

AJAX for Java简单表数据查询实例
AJAX for Java简单表数据查询实例<?XML:NAMESPACE PREFIX = O /> AJAX WebShop 3对Java开发具有良好的支持,同时也提供了各种层次的后台 ...
一个简单的Ajax开发框架
根据Ajax与XMLHttpRequest对象一文的介绍,我们可以开发一个简单的Ajax框架供以后开发应用. 首先要知道Ajax的开发流程: 1:初始化XMLHttpRequest,这一步要考虑跨浏览 ...
Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
html ajax请求案例,AJAX 请求实例
AJAX 请求实例 Next Page 我们已看到 AJAX 可被用来创建更多交互性的应用程序. AJAX Suggest实例在下面的 AJAX 例子中,我们会演示当用户向一个标准的 HTML 表单 ...
使用struts2+JQuery实现的简单的ajax例子
也为简单的业务需要,所以使用了Struts配合JQuery制作的一个简单的AJAX的例子,希望有兴趣的朋友可以看看. Js代码 <script type="text/javascr ...
最简单的启动Docker实例Mesos Golang Framework
工作了很长时间最近有时间第一次写,希望支持如果大家了解Mesos,就知道Mesos是经典的两层调度,官网的架构图(http://mesos.apache.org/documentation/late ...
用python实现视频换脸_超简单使用Python换脸实例
换脸! 这段时间,deepfakes搞得火热,比方说把<射雕英雄传>里的朱茵换成了杨幂,看下面的图!毫无违和感! 其实早在之前,基于AI换脸的技术就得到了应用,比方说<速度与激情7& ...
ajax如何请求json文件,简单的ajax请求加载外部json文件
我在学习ajax ....我试图从json文件发出一个基本请求,它与我的index.html位于同一个文件夹中,但由于某种原因它说未定义:(我可以看到错误是可变的人,但我不能赶上为什么它未定义.... ...

简单的Ajax应用实例

简单的Ajax应用实例相关推荐

最新文章

热门文章