ユーザー登録の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>

提出するリセットコード

自動運転