ajax 简单应用---用户名无刷新验证

最新推荐文章于 2021-10-23 20:27:26 发布

Time，，

最新推荐文章于 2021-10-23 20:27:26 发布

阅读量201

点赞数

分类专栏： javascript 文章标签： php xhtml 数据库

本文链接：https://blog.csdn.net/kaka_2014/article/details/84223072

版权

javascript 专栏收录该内容

45 篇文章 1 订阅

订阅专栏

页面部分代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <form action="2.php" method="post">
    <ul>
	   <li>用户名<input type="text" value="" name="uname" id="uname" /><span id="msg">(*)2-16位数字、字母</span></li>
	   <li>密码<input type="password" value="" name="upwd" id="upwd" /></li>
	   <li><input type="submit" value="注册" /></li>
	</ul>
  </form>
<script type="text/javascript">
/*======================================================
*1: 创建XMLHttpRequest 对象;[ajax 引擎]
*2: 准备好发送请求url地址与参数;
*3: 定义处理返回结果的方法
*4  打开
*5: 发送请求
*6: 接收服务器返回结果...
*7: 判断状态  XMLHttpRequest  {接收完成}
*8: 判断状态  http           {数据正确}
*9: 接收返回结果            {xml/text二种方式}
*10: 显示
*///==================================================== 

  var http; //全局变量
  //AJAX验证用户名是否存在
window.onload = function(){
   var u = document.getElementById("uname");
   u.onblur = function(){

   //1:创建对象AJAX引擎
   if(window.XMLHttpRequest){
     //FF   IE8  IE9 -->OK
	 http =  new XMLHttpRequest();
   }else{
   //IE 6  --->OK
     http = new ActiveXObject('Microsoft.XMLHTTP');
   }
   //url
   var uname = document.getElementById("uname").value;
   var url = "2.php?uname="+uname;
//alert(url);
   //定义回调方法
   //result 函数名
   //onreadystatechange 指定当readyState属性改变时的事件处理句柄
   http.onreadystatechange = result;
   //打开 GET 传参数get -----------true 异步 false 同步
   http.open("GET",url,true);
   //发送   get 方式发送 就写 null
   http.send(null);
   };
    //回调函数
   function result(){
     //4服务器发送数据结束
	 //200发送正确数据
    if(http.readyState == 4 
	&& http.status === 200){ // status 返回当前请求的http状态码
	}  
     var msg =document.getElementById("msg");
	 msg.innerHTML = http.responseText; //responseText 将响应信息作为字符串返回
   }
};
</script>
</body>
</html>

程序数据库操作部分代码


<?php
  function isExist($name){
   $link = mysql_connect("localhost","root","");
   mysql_select_db("zhibin");
   mysql_query("set names utf8");
   $sql = "select count(id) from t_user where name = '{$name}'";
   $result = mysql_query($sql)or die(mysql_error());

   if($row = mysql_fetch_array($result)){
      if($row['0'] > 0){
	    return 1;
	  }else{
	    return 0;
	  }
   }
   return 0;
  }

if(!empty($_GET['uname'])){  //??为什么是get不是post---->>前一个页面43行 url用的是GET方式
  $rs = intval(isExist($_GET['uname']));
  if($rs == 1){
   echo "用户己存在";
  }else{
   echo "欢迎使用"; 
  }
}
//  var_dump(isExist('当当1'));