ajax無重新整理驗證使用者?

Tags: 使用者, word,

ajax無重新整理驗證使用者,php無重新整理驗證,php+ajax無重新整理驗證

方法/步驟

隨著web2.0的興起和發展,越來越多的網站開始注重使用者體驗。這使得ajax技術日益流行,日程中最常見的有很多,比如:無重新整理驗證使用者名稱是否合法,無重新整理更新區域性內容等...今天就教大家怎麼利用PHP+ajax無重新整理驗證使用者是否合法,只是一個簡單的小demo,拋磚引玉。

**寫得比較糙,不過大致效果都實現啦,下面是最終的效果展示:

<1>.當用戶已經存在時;

<2>.當用戶不存在時;

<3>.當輸入內容為空時;

ajax無重新整理驗證使用者

ajax無重新整理驗證使用者

ajax無重新整理驗證使用者

1.首先新建一張使用者資料表,SQL語句如下:

CREATE TABLE IF NOT EXISTS `example_user` (

`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',

`username` varchar(64) NOT NULL DEFAULT '' COMMENT '賬號',

`password` char(32) NOT NULL DEFAULT '' COMMENT '密碼',

`email` varchar(128) NOT NULL DEFAULT '' COMMENT '郵箱',

PRIMARY KEY (`id`)

) ENGINE=MYISAM DEFAULT CHARSET=utf8 COMMENT='使用者表';

ajax無重新整理驗證使用者

2.向資料表插入一條使用者資料:

INSERT INTO `example_user` VALUES (NULL,'admin',md5('123456'),'[email protected]');

查看錶,結果如圖所示;

SELECT * FROM `example_user`;

ajax無重新整理驗證使用者

3.接下來在工作目錄建立兩個檔案:分別的註冊的html頁面和負責非同步查詢資料庫的php檔案;(PS:名字大家可以隨便起,我這裡為了方便,統一為register)

ajax無重新整理驗證使用者

4.register.html程式碼如下:

Ajax無重新整理驗證

頁頭部分:使用jQuery呼叫ajax,事件為blur,大致流程為:

當滑鼠離開賬號輸入框時,通過ajax傳送input的資料到register.php頁面驗證,然後在賬號輸入框的右側顯示返回內容,下面是CSS部分;

ajax無重新整理驗證使用者

5.頁面內容部分,程式碼如下:

賬號:

請輸入您的賬號.

密碼:

請輸入您的密碼.

郵箱:

請輸入您的郵箱.

這個就不解釋啊啦,大家應該都能看懂;

ajax無重新整理驗證使用者

6.後臺驗證的register.php檔案程式碼如下:

$username = htmlspecialchars( trim($_POST['username']) );

if (!empty($username)) {

$mysqli = new mysqli("127.0.0.1", "root", "root", "test");

$sql = "SELECT `username` FROM `example_user` WHERE `username` = '$username' LIMIT 1";

$result = $mysqli->query($sql);

$temp = array();

while ($row = $result->fetch_assoc()) {

$temp = $row;

}

if (empty($temp)) {

echo "恭喜,可以註冊!";

} else {

echo "抱歉,無法註冊!";

}

} else {

echo "請輸入您的賬號.";

}

ajax無重新整理驗證使用者

相關問題答案