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>
確認密碼：<input type="password" id="repassword" name="repassword" /><br>
<!--用于提示表單驗證信息-->
<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 = "警告:確認密碼為空 ";
isNotError = false;
return;
} else if(pwd!=repwd){
oError.innerHTML = "警告:兩次密碼不一致 ";
isNotError = false;
return;
}
//創(chuàng)建XHR對象
var xhr = new XMLHttpRequest();
//設置請求URL
var url = "./add.php?username=" + name+"&password="+pwd;
//設置XHR對象readyState變化時響應函數(shù)
xhr.onreadystatechange = function () {
//readyState是請求的狀態(tài)，為4表示請求結(jié)束
if (xhr.readyState == 4) {
//responseText服務器響應的內(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);
}
}
