Ajax implementation of user registration
User registration page (js implements ajax request in get mode)
register.html code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<hr size="1">
用戶：<input type="text" id ="username" name="username"/><br>
密碼：<input type="password" id="password" name="password" /><br>
確認(rèn)密碼：<input type="password" id="repassword" name="repassword" /><br>
<!--用于提示表單驗(yàn)證信息-->
<div id="error_message" style="color: red"></div>
<input type="submit" id="register" name="register" value="注冊">
</body>
<script type="text/javascript">
document.getElementById("register").onclick = function () {
var name = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
var repwd = document.getElementById("repassword").value;
var oError = document.getElementById("error_message");
var isNotError = true;
if(name==""){
oError.innerHTML = "警告:用戶名為空 ";
isNotError = false;
return;
}else if(pwd==""){
oError.innerHTML = "警告:密碼為空 ";
isNotError = false;
return;
}else if(repwd==""){
oError.innerHTML = "警告:確認(rèn)密碼為空 ";
isNotError = false;
return;
} else if(pwd!=repwd){
oError.innerHTML = "警告:兩次密碼不一致 ";
isNotError = false;
return;
}
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//設(shè)置請求URL
var url = "./add.php?username=" + name+"&password="+pwd;
//設(shè)置XHR對象readyState變化時(shí)響應(yīng)函數(shù)
xhr.onreadystatechange = function () {
//readyState是請求的狀態(tài)，為4表示請求結(jié)束
if (xhr.readyState == 4) {
//responseText服務(wù)器響應(yīng)的內(nèi)容
var data = eval(this.responseText);
for(var index in data) {
if(data[index].code==1){
alert(data[index].message);//用戶已存在
}else if(data[index].code==2){
alert(data[index].message);//注冊失敗
}
else if(data[index].code==3){
alert(data[index].message);//注冊成功
location.href='login.html';
}
}
}
};
//打開鏈接
xhr.open("get", url, true);
//發(fā)送請求
xhr.send();
}
</script>
</html>ajax The URL address submitted is add.php. In add.php, the database connection and data processing are performed, and then returned to the registration page for display in json format. Here, the returned data is printed out through alert
add.php code is as follows:
<?php
/**
* Created by PhpStorm.
* User: Administrator
* Date: 2018/2/27 0027
* Time: 上午 11:06
*/
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
$username = trim($_GET['username']);//處理下空格操作
$password = $_GET['password'];
}
$mysqli = new mysqli('localhost', 'root', 'root', 'student');
$result = $mysqli->query("SELECT password FROM user WHERE username = "."'$username'");
$rs=$result->fetch_row();
if(!empty($rs)){
$data = array(
array('code' => 1, 'message' => '用戶已存在,請重新注冊'),
);
echo json_encode($data); //數(shù)組轉(zhuǎn)json格式
}else {
$mysqli = new mysqli('localhost', 'root', 'root', 'student');
$sql = "INSERT INTO user (username,password) VALUES ('$_GET[username]', '$_GET[password]')";
$rs = $mysqli->query($sql);
if (!$rs) {
$data = array(
array('code' => 2, 'message' => '注冊失敗,請重新注冊'),
);
echo json_encode($data);
} else {
$data = array(
array('code' => 3, 'message' => '注冊成功！跳轉(zhuǎn)到登錄頁面。。。'),
);
echo json_encode($data);
}
}
