首頁 > 後端開發 > php教程 > php+ajax實現註冊即時驗證功能的方法

php+ajax實現註冊即時驗證功能的方法

墨辰丷
發布: 2023-03-29 10:04:02
原創
1839 人瀏覽過

我們在網站上面註冊時,在輸入用戶名時,首先要進行無刷新驗證,這篇文章主要為大家詳細介紹了php ajax註冊實時驗證功能,感興趣的小伙伴們可以參考一下

ajax的即時驗證技術已經很成熟了,在一些規範的網站上,如果有註冊驗證的模板,必定會涉及到ajax的無刷新驗證,這在用戶註冊的體驗中是很棒的,比較一個不能及時和後台無刷新對接的驗證模式,要重新返回來刷新,這對於用戶來說,體驗上是很不友好的。

ajax的模式幾乎是所有網站應用的需求,ajax作為前端無刷新驗證,可以和所有後台語言進行組合使用,例如asp ajax,php ajax,.net ajax等等組合,這裡主要講解的是php ajax的註冊驗證。

下面的驗證是一個完整的實例,我們在網站上面註冊時,在輸入用戶名時,首先要進行無刷新驗證,要驗證一下後台數據庫裡面是否存在同名的數據,如果存在,則無刷新顯示用戶名已被佔用的提示,這裡一共涉及到四個文件。

ajax.js:ajax技術的核心檔案了,主要是驗證提示的時時顯示,這個檔案通常不需要進行修改,只需要進行前端呼叫即可。

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
 } 
xmlHttp.onreadystatechange=stateChanged 

var geturl="conn.php?q="+str
//sid是增加一个随机数 防止页面启用缓存技术·
geturl=geturl+"&sid="+Math.random()
geturl=encodeURI(geturl);
geturl=encodeURI(geturl); 
xmlHttp.open("GET",geturl,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;
}
登入後複製

conn.php:這是網站的設定文件,要配置好自己本地的mysql用戶名和密碼,需要配置PHP與資料庫的連接,可以參考PHP MYSQL資料庫連接的文章,另外要處理接受過來的資料進行時實顯示,如果有多項要驗證的文件,在這裡進行多項接受和驗證即可。

<?php
$q=$_GET["q"];
$q = urldecode($q);

if (strlen($q) > 0)
{
 $conn = @mysql_connect("localhost","root","1010") or die ("MySql连接错误");
 mysql_select_db("xin",$conn);
 mysql_query("set names &#39;utf8&#39;");
 
 $sql = "SELECT username FROM message WHERE username = &#39;$q&#39;";
 $query = mysql_query($sql);
 @$row = mysql_fetch_array($query);
 
 if(!empty($row[&#39;username&#39;]))
 {
 $response = "<font color=red>已经被注册!</font>";
 }else
 {
 $response = "<font color=blue>恭喜!可以注册!</font>";
 }
 
 echo $response;
}

?>
登入後複製

index.html:這就是前端檔案了,這個檔案相對來說要更簡單一些,呼叫了ajax.js的處理文件,將要提交無刷新驗證的文件提交到conn.php和後台進行連接。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="ajax.js"></script> 
</head>
<body bgcolor="#999999">
<center>
<form> 
<table>
 <tr>
 <td>用户名:</td>
 <td><input type="text" id="txt1" onKeyUp="showHint(this.value)"></td>
 </tr>
 <tr align="center">
 <td colspan="2"><span id="txtHint"></span></td>
 </tr>
</table>
</form>
</center>
</body>
</html>
登入後複製

庫.txt:這個就是SQL的資料庫檔案了,將這個檔案匯入到mysql資料庫中即可。

DROP DATABASE IF EXISTS `xin`;
CREATE DATABASE `xin` /*!40100 DEFAULT CHARACTER SET utf8 */;
USE `xin`;


CREATE TABLE `message` (
 `id` int(11) NOT NULL auto_increment,
 `username` varchar(20) default NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
登入後複製

將這幾個檔案保存在可以運行PHP檔案的根目錄即可,測試網址為localhost/index.html,下面是打包下載的整套文件,試著修改為自己需求的註冊模組,例如加上密碼,姓名之類的。

總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。

相關推薦:

php使用正規表示式取得字串中的URL詳解

php preg_match的比對不同國家語言實例詳解

PHP ajax實作登入後台驗證實例詳解

#

以上是php+ajax實現註冊即時驗證功能的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板