首页 后端开发 php教程 PHP and AJAX Suggest_PHP教程

PHP and AJAX Suggest_PHP教程

Jul 13, 2016 pm 05:07 PM
ajax and php 这个

PHP and AJAX Suggest

这个suggest是仿google的效果了,google总是走在世界的技术的前面啊,下面我们也来看看实例吧.

先看看html文件.

登录后复制
First Name:
<p>Suggestions: <span id="txtHint"></span></p>
登录后复制
下面用js文件的ajax文件来处理数据.
登录后复制
<pre class="brush:php;toolbar:false">var xmlHttp;

function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  } 
var url="gethint.php";
url=url+"?q="+str;
url=url+"&amp;sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
 } 
}
登录后复制
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
登录后复制
 
登录后复制
这个文件只是返回php处理的数据,而我们的php文件如下.
登录后复制
<pre class="brush:php;toolbar:false"><?php // Fill up array with names
$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";
登录后复制
//get the q parameter from URL
$q=$_GET["q"];
登录后复制
//lookup all hints from array if length of q&gt;0
if (strlen($q) &gt; 0)
{
$hint="";
for($i=0; $i<count if else output to suggestion no hint were found the correct values response echo></count>
登录后复制
好了我们的确suggest效果就完成了.
登录后复制

www.bkjia.comtruehttp://www.bkjia.com/PHPjc/630490.htmlTechArticlePHP and AJAX Suggest 这个suggest是仿google的效果了,google总是走在世界的技术的前面啊,下面我们也来看看实例吧. 先看看html文件. form First Name:inp...
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南 Dec 24, 2024 pm 04:42 PM

适用于 Ubuntu 和 Debian 的 PHP 8.4 安装和升级指南

CakePHP 日期和时间 CakePHP 日期和时间 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和时间

CakePHP 项目配置 CakePHP 项目配置 Sep 10, 2024 pm 05:25 PM

CakePHP 项目配置

CakePHP 文件上传 CakePHP 文件上传 Sep 10, 2024 pm 05:27 PM

CakePHP 文件上传

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

讨论 CakePHP 讨论 CakePHP Sep 10, 2024 pm 05:28 PM

讨论 CakePHP

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 如何设置 Visual Studio Code (VS Code) 进行 PHP 开发 Dec 20, 2024 am 11:31 AM

如何设置 Visual Studio Code (VS Code) 进行 PHP 开发

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

See all articles