ajax無重新整理驗證使用者,php無重新整理驗證,php+ajax無重新整理驗證
方法/步驟
隨著web2.0的興起和發展,越來越多的網站開始注重使用者體驗。這使得ajax技術日益流行,日程中最常見的有很多,比如:無重新整理驗證使用者名稱是否合法,無重新整理更新區域性內容等...今天就教大家怎麼利用PHP+ajax無重新整理驗證使用者是否合法,只是一個簡單的小demo,拋磚引玉。
**寫得比較糙,不過大致效果都實現啦,下面是最終的效果展示:
<1>.當用戶已經存在時;
<2>.當用戶不存在時;
<3>.當輸入內容為空時;
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='使用者表';
2.向資料表插入一條使用者資料:
INSERT INTO `example_user` VALUES (NULL,'admin',md5('123456'),'[email protected]');
查看錶,結果如圖所示;
SELECT * FROM `example_user`;
3.接下來在工作目錄建立兩個檔案:分別的註冊的html頁面和負責非同步查詢資料庫的php檔案;(PS:名字大家可以隨便起,我這裡為了方便,統一為register)
4.register.html程式碼如下:
$(document).ready(function(){
$(".register input:first").blur(function(){
$.ajax({
type:"post",
url:"register.php",
data:"username=" + $(".register input:first").val(),
success:function(msg){
$("#userinfo").html(msg);
}
});
});
});
*{margin:0px;padding:0px;}
.register{width:550px;height:250px;padding:25px;margin:200px auto;border:2px solid #7aba5f;}
.display {width:350px;height:60px;float:left;margin-right:20px;}
.reginfo {width:150px;height:60px;float:left;margin-right:20px;color:#999999;font-size:13px;line-height:30px;}
.register input{width:300px;height:30px;border:1px solid #7aba5f;}
.register input.submit{width:100px;height:40px;color:white;font-size:16px;background:#7aba5f;border:none;margin-top:30px;margin-left:150px;}
頁頭部分:使用jQuery呼叫ajax,事件為blur,大致流程為:
當滑鼠離開賬號輸入框時,通過ajax傳送input的資料到register.php頁面驗證,然後在賬號輸入框的右側顯示返回內容,下面是CSS部分;
5.頁面內容部分,程式碼如下:
賬號:
請輸入您的賬號.
密碼:
請輸入您的密碼.
郵箱:
請輸入您的郵箱.
這個就不解釋啊啦,大家應該都能看懂;
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 "請輸入您的賬號.";
}