用户注册的ajax实现

用户注册页面（js实现get方式的ajax请求）

<!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;
         }
         //创建XHR对象
 var xhr = new XMLHttpRequest();
         //设置请求URL
 var url = "./add.php?username=" + name+"&password="+pwd;
         //设置XHR对象readyState变化时响应函数
 xhr.onreadystatechange = function () {
             //readyState是请求的状态，为4表示请求结束
 if (xhr.readyState == 4) {
                 //responseText服务器响应的内容
 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);
         //发送请求
 xhr.send();
     }
 </script>
</html>

ajax提交到的url地址是add.php,在add.php进行数据库的连接以及对数据的处理,之后通过json格式返回到注册页面显示出来,这里通过alert打印出返回的数据

add.php代码如下:

<?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); //数组转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' => '注册成功！跳转到登录页面。。。'),
        );
        echo json_encode($data);
    }
}

新建文件

<!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;
 }
 //创建XHR对象
 var xhr = new XMLHttpRequest();
 //设置请求URL
 var url = "./add.php?username=" + name+"&password="+pwd;
 //设置XHR对象readyState变化时响应函数
 xhr.onreadystatechange = function () {
 //readyState是请求的状态，为4表示请求结束
 if (xhr.readyState == 4) {
 //responseText服务器响应的内容
 var data = eval(this.responseText);//json转对象格式
 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);
 //发送请求
 xhr.send();
 }
 </script>
</html>

提交重置代码

自动运行

全屏