注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Mr.Right

不顾一切的去想,于是我们有了梦想。脚踏实地的去做,于是梦想成了现实。

 
 
 

日志

 
 
关于我

人生一年又一年,只要每年都有所积累,有所成长,都有那么一次自己认为满意的花开时刻就好。即使一时不顺,也要敞开胸怀。生命的荣枯并不是简单的重复,一时的得失不是成败的尺度。花开不是荣耀,而是一个美丽的结束,花谢也不是耻辱,而是一个低调的开始。

网易考拉推荐

【转载】AJAX+PHP实现输入姓名字母出相关提示并即时显示信息  

2013-01-09 21:20:43|  分类: 摘录 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

效果一:输入k,下面出提示: k , ko ,kob, kobe , 并显示 k的信息点击ko,kob,kobe则直接调出他们的信息

AJAX+PHP实现输入姓名字母出相关提示并即时显示信息 - xwmhmily - e科士威,你最佳的创业机遇!

 二:继续输入,kob:

AJAX+PHP实现输入姓名字母出相关提示并即时显示信息 - xwmhmily - e科士威,你最佳的创业机遇!

 三:输入 kobe:

AJAX+PHP实现输入姓名字母出相关提示并即时显示信息 - xwmhmily - e科士威,你最佳的创业机遇!

 四:再接着输入:kobex ,哦哦,过头了吧

AJAX+PHP实现输入姓名字母出相关提示并即时显示信息 - xwmhmily - e科士威,你最佳的创业机遇!

看了效果了, 不用多说了, 三个文件:ajax2.html前台文件,getName.php 取得相关名字,getInfo.php 取得并显示信息:

ajax2.html:

------------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<title>Ajax Example 2</title>
<style type="text/css">
  tr td{
    color:black;
    text-align:left;
  }
</style>

<script type="text/javascript">

// 定义XMLHttpRequest对象
var xmlHttp;         


// 创建 XMLHttpRequest:
function createXmlHttpRequest(){
  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;
}

// Get similar name:
function getName(value){
  if(value!=""){
   xmlHttp=createXmlHttpRequest();
   var url;
   url="getName.php?username="+value;
   //alert(url);
   xmlHttp.open("GET",url,true);
   xmlHttp.send(null);   
   xmlHttp.onreadystatechange=function(){
   if(xmlHttp.readyState==4 && xmlHttp.status==200){
  document.getElementById('names').innerHTML=xmlHttp.responseText;
  getInfo(value);
   }
   }
  }
}

// Get detail info:
function getInfo(value){
  if(value!=""){
   xmlHttp=createXmlHttpRequest();
    var url;
    url="getInfo.php?username="+value;
    //alert(url);
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);   
    xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4 && xmlHttp.status==200)
     document.getElementById('detailinfo').innerHTML=xmlHttp.responseText;
    }
  }
}


</script>
</head>

<body>
  输入用户名,得到其资料: <HR>
  Username: <input type=text id=username onkeyup="getName(this.value)"><BR><BR>
    <span id=names></span><p>
    <span id=detailinfo></span><p>
</body>
</html>

------------------------------------------------------------------------------------------------------------------------------------------

getName.php: 很简单,不用说明了

<?php

  include ("connDB.php");
  //强制清除AJAX缓存:
  header("Cache-Control: no-cache, must-revalidate");
  header("Content-Type:text/html;charset=GB2312");
 
  $username=$_GET["username"];
  $SQL="SELECT firstname FROM players WHERE firstname LIKE '$username%' ORDER BY firstname";
  //print("SQL is: ".$SQL."<BR>");
  $result=mysql_query($SQL);
  $rows=mysql_num_rows($result);
  $resultset=mysql_fetch_row($result);
  $arr="You're Searching: <font color=blue>$resultset[0]</font> ";
  if($rows!=0){
    for($i=1;$i<=$rows;$i++){
      @mysql_data_seek($result,$i);
      $resultset=mysql_fetch_row($result);
      $arr.=$resultset[0]." ";
    }
  }
  echo $arr;

?>

--------------------------------------------------------------------------------------------------------------------------------------------------------------

getInfo.php:

<?php

  include ("connDB.php");
  //强制清除AJAX缓存:
  header("Cache-Control: no-cache, must-revalidate");
  header("Content-Type:text/html;charset=GB2312");
 
  $username=$_GET["username"]; 

  $SQL="SELECT * FROM players WHERE firstname='$username'";
  //print("SQL is: ".$SQL."<BR>");
  $result=mysql_query($SQL);
  $rows=mysql_num_rows($result);
  //print("rows is: ".$rows."<BR>");
  $columns=mysql_num_fields($result);
  if($rows!=0){
    $info=$username." 的信息如下:<BR>";
    $info.="<table border=1 bgcolor=orange>";
    for($i=1;$i<=$rows;$i++){
      @mysql_data_seek($result,$i);
      $resultset=@mysql_fetch_array($result);
      $info.="<tr><td ROWSPAN=5><img src=$resultset[7] width=180 heigth=190></img></td><td>Firstname: </td><td>$resultset[2]</td></tr>";
      $info.="<tr><td>Lastname:</td><td>$resultset[1]</td></tr><tr><td>Age: </td><td>$resultset[3]</td></tr>";
      $info.="<tr><td>Team: </td><td>$resultset[4]</td></tr><tr><td>Position: </td><td>$resultset[5]</td></tr>";
      $info.="<tr><td>Description: </td><td colspan=2><textarea rows=5 cols=30>$resultset[6]</textarea></td></tr>";
    }
    $info.="</table>";
    echo $info;
  }else if($rows==0){
    echo "Sorry,No info about ".$username." !";
  }


?>

  评论这张
 
阅读(358)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016