Ajax implementation of user registration

User registration page (js implements ajax request in get mode)

<!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 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); //数组转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);
    }
}

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

Ajax implementation of user registration

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]