快捷導(dǎo)航

PHP+Ajax實(shí)現(xiàn)的檢測(cè)用戶名功能簡(jiǎn)單示例

更新時(shí)間：2019年02月12日 09:19:06 作者：chengqiuming

這篇文章主要介紹了PHP+Ajax實(shí)現(xiàn)的檢測(cè)用戶名功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了php結(jié)合ajax基于事件響應(yīng)動(dòng)態(tài)查詢數(shù)據(jù)庫(kù)及用戶名檢測(cè)相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了PHP+Ajax實(shí)現(xiàn)的檢測(cè)用戶名功能。分享給大家供大家參考，具體如下：

一代碼

fun.js：

function chkUsername(username){
    if(username==''){ //判斷用戶名是否為空
      alert('請(qǐng)輸入用戶名！');
    }else{
    var xmlObj; //定義XMLHttpRequest對(duì)象
      if(window.ActiveXObject){ //如果是瀏覽器支持ActiveXObjext則創(chuàng)建ActiveXObject對(duì)象
        xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
      }else if(window.XMLHttpRequest){ //如果瀏覽器支持XMLHttpRequest對(duì)象則創(chuàng)建XMLHttpRequest對(duì)象
          xmlObj = new XMLHttpRequest();
      }
      xmlObj.onreadystatechange = callBackFun; //指定回調(diào)函數(shù)
      xmlObj.open('GET', 'chk.php?username='+username, true); //使用GET方法調(diào)用chk.php并傳遞username參數(shù)的值
      xmlObj.send(null); //不發(fā)送任何數(shù)據(jù)，因?yàn)閿?shù)據(jù)已經(jīng)使用請(qǐng)求URL通過(guò)GET方法發(fā)送
      function callBackFun(){ //回調(diào)函數(shù)
        if(xmlObj.readyState == 4 && xmlObj.status == 200){ //如果服務(wù)器已經(jīng)傳回信息并沒(méi)發(fā)生錯(cuò)誤
              if(xmlObj.responseText=='y'){ //如果服務(wù)器傳回的內(nèi)容為y，則表示用戶名已經(jīng)被占用
                  alert('該用戶名已被他人使用！');
              }else{ //不為y，則表明用戶名未被占用
                alert('恭喜，該用戶未被使用！');
              }
          }
      }
    }
}

chk.php：

<?php
require_once 'conn.php';   //包含數(shù)據(jù)庫(kù)連接文件
$sql = mysql_query("select id, username from tb_user where username='".trim($_GET['username'])."'", $connID);   //執(zhí)行查詢
$result = mysql_fetch_array($sql);
if ($result) {   //判斷用戶名是否存在
  echo 'y';
} else {
  echo 'n';
}
?>

conn.php：

<?php
$host = '127.0.0.1';
$userName = 'root';
$password = 'root';
$connID = mysql_connect($host, $userName, $password);
mysql_select_db('db_database27', $connID);
mysql_query('set names gbk');
?>

index.php：

<!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=gb2312" />
<title>Ajax檢測(cè)用戶名</title>
</head>
<script language="javascript" src="js/fun.js"></script>
<body>
<h2>Ajax檢測(cè)用戶名</h2>
<form name="form_register">
  用戶名：<input type="text" id="username" name="username" size="20" />&nbsp;<input type="button" value="查看用戶名是否被占用" onclick="javascript:chkUsername(form_register.username.value)" />
</form>
</body>
</html>

二運(yùn)行結(jié)果