Ajax實現簡單的登入驗證與帳號註冊

阿新 • • 發佈：2019-01-24

上一篇部落格介紹了Ajax的GET和POST方法以及上傳檔案的進度條展示,這篇部落格將介紹一個簡單的登入與註冊功能的實現

設計HTML

這裡寫圖片描述

這個是即將成為我畢業設計的一個網站,

在導航欄我添加了兩個註冊和登入的按鈕和按下登入按鈕後彈出的登入框,這就構成了一個簡單的登入視窗

程式碼如下: 需引入Bootstrap

<div class="modal fade" id="user_Login" tabindex="-1" role="dialog" aria-labelledby="user_Msg_to" aria-hidden="true">
    <div 
 class="modal-dialog" id="userLoginBox">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id 
="user_Msg_to">登 錄</h4>
            </div>
            <div class="modal-body">
                <div id="inputBox" class="text-center">
                    <p>登入後在雲端儲存你的歌單!</p>
                    <form id="form1">
                        <p>
                        <div 
 id="div-email_address" class="input-group">
                            <span class="input-group-addon"><i class="icon-envelope"></i></span>
                            <input id="user_id" class="form-control" type="text" placeholder="郵箱地址">
                        </div>
                        </p>
                        <p>
                        <div id="div-password" class="input-group">
                            <span class="input-group-addon"><i class="icon-key"></i></span>
                            <input id="user_pass" class="form-control" type="password" placeholder="密碼">
                        </div>
                        </p>
                        <a id="login_to" class="btn btn-block btn-success">
                            <i class="glyphicon glyphicon-log-in"></i> 登 錄</a>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">
                    關 閉
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

設計PHP/MySql

這裡主要講述Ajax,關於php以及SQL都直接貼程式碼了:

<?php
$username='root';
$userpass='q12we3';
$host='127.0.0.1';
$database='music';
$conn=new mysqli($host,$username,$userpass,$database);
if(!$conn){
    echo '-1';
    exit;
}

$user_id = trim($_GET['user_id']);
$user_pass = $_GET['user_pass'];

$sql="SELECT * FROM `user` WHERE `user_id` = '".$user_id."' ";
$result=$conn -> query($sql);
$row = $result -> fetch_row();

if($row[0]==""||$user_pass!=$row[1]){
    echo "0";
}else{
    $test = $row[0].'|'.$row[2].'|'.$row[3];
    echo $test;
}

?>

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

CREATE TABLE `user` (
  `user_id` varchar(16) NOT NULL,
  `user_pass` varchar(16) NOT NULL,
  `user_name` varchar(32) NOT NULL,
  `user_icon` varchar(1000) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;


INSERT INTO `user` (`user_id`, `user_pass`, `user_name`, `user_icon`) VALUES
('chation99', 'q12we3', '恰西', 'pic/userHead/qx.jpg'),
('admin001', 'wsad2428210', '管理員001', 'pic/userHead/bq2.jpg');


ALTER TABLE `user`
  ADD PRIMARY KEY (`user_id`);

Ajax實現功能

根據我們編寫的PHP程式碼,在我們get資料到php的時候會返回0,或者一段記錄,我們需要通過判斷,如果為0的話代表登入失敗,賬號或密碼錯誤,如果返回一段記錄的話,我們就需要對這段記錄進行分析以”|”為拆分號,將結果拆分為帳號,使用者名稱以及頭像地址,

首先初始化Ajax,為了方便把Ajax繫結為登入按鈕的事件函式,我們需要把它抽象化為一個函式,引數為使用者輸入的帳號和密碼

function ajaxLogin(id,pass,classes){
var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", url, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //do something..
        }
    };
    xmlhttp.send();
}
}

這裡,我們需要做的重點就是//dosomething這裡!

首先,我們判斷返回值,如果是0就證明登入失敗,做相應的操作,如果為一段記錄,我們就分析該記錄並做相應操作

function ajaxLogin(id,pass,classes){
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText != 0) {
                var textArray = xmlhttp.responseText.split("|");
                //用split()函式分割字串為一個數組
                //next do something..
            }else{
               //do something..
            }
        }
    };
    xmlhttp.send();
}

/* 修改input樣式 */
function loginStyle(idInput, passInput, loginBtn) {
    var classes = "",oldClasses = "";
    var userId = document.getElementById(idInput);
    var userPass = document.getElementById(passInput);
    var login = document.getElementById(loginBtn);
    login.addEventListener("click", function (event) {
        if (userId.value != "" && userPass.value != "") {
            oldClasses = this.getAttribute("class");
            classes = oldClasses + " disabled";
            this.setAttribute("class", classes);
            this.innerHTML = "<i class='icon-refresh icon-spin'></i> 正在登陸...";

            var idU = userId.value;
            var passU = userPass.value;

            event.preventDefault();
            ajaxLogin(idU,passU,oldClasses);

        } else {
            if (userId.value == "") {
                classes = userId.parentNode.getAttribute("class");
                userId.parentNode.setAttribute("class", classes + " has-error");
            }
            if (userPass.value == "") {
                classes = userPass.parentNode.getAttribute("class");
                userPass.parentNode.setAttribute("class", classes + " has-error");
            }
        }
    }, false);
    var focus = function () {
        this.parentNode.setAttribute("class", "input-group");
    };
    userId.addEventListener("focus", focus, false);
    userPass.addEventListener("focus", focus, false);
}

/* Ajax登入 */
function ajaxLogin(id,pass,classes){
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "pages/loginByNav.php?user_id=" + id + "&user_pass=" + pass, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText != 0) {
                var textArray = xmlhttp.responseText.split("|");
                document.getElementById("inputBox").innerHTML = "<h3>歡迎回來，" + textArray[1] + "</h3><img class='img-responsive img-circle' src='" + textArray[2] + "'>";
                document.getElementById("user_name_nav").innerHTML = " " + textArray[1] + "，歡迎你！";
                document.getElementById("user_img_nav").setAttribute("src", textArray[2]);
                document.getElementById("user_info_nav").style.visibility = "";
                document.getElementById("loginAndReg").style.visibility = "hidden";
                document.getElementById("loginAndReg1").style.visibility = "hidden";
            }else{
                var login = document.getElementById("login_to");
                login.setAttribute("class",classes);
                login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 登 錄";
                removeElem("warningTip");
                var tips = "賬號或密碼錯誤！";
                var form = document.getElementById("form1");
                form.insertBefore(alertBox(tips,"warning"),form.childNodes[0]);
            }
        }
    };
    xmlhttp.send();
}

/* 新建提示框innerHTML */
function alertBox (tip,color){
    var box = document.createElement("div");
    box.setAttribute("id","warningTip");
    box.setAttribute("class","alert alert-"+color+" alert-dismissible");
    box.setAttribute("role","alert");
    box.innerHTML = "<button type='button' class='close' data-dismiss='alert' aria-label='Close'><spanaria-hidden='true'>&times;</span></button>"+tip;
    return box;
}

效果如下~

這裡寫圖片描述

註冊

註冊與登入大同小異,這裡我多介紹一些其他功能的實現,

首先是php程式碼

<?php
$username='root';
$userpass='q12we3';
$host='127.0.0.1';
$database='music';
$conn=new mysqli($host,$username,$userpass,$database);
if(!$conn){
    echo '-1';
    exit;
}

$user_name = trim($_GET['user_name']);
$user_id = trim($_GET['email_address']);
$user_pass = $_GET['password'];

$sql = "INSERT INTO `user` (`user_id`, `user_pass`, `user_name`, `user_icon`) VALUES ('$user_id', '$user_pass', '$user_name', 'pic/default.jpg')";

if ($conn->query($sql) === TRUE) {
    echo "1";
} else {
    echo "0";
}

$conn->close();

?>

註冊成功返回1,失敗返回0; 註冊頁面如下:

這裡寫圖片描述

<body>
<div id="head-div">
    <a href="../index.html"><span class="icon-music" style="font-size: xx-large"></span></a>
</div>
<h4>填寫以下資訊,加入我們</h4>
<div id="form-reg" ng-app="myApp">
    <form id="form1" ng-controller="samePass">
        <p>
        <div id="div-user_name" class="input-group">
                        <span class="input-group-addon" id="sizing-addon2"><i
                                class="glyphicon glyphicon-user"></i></span>
            <input name="user_name" required id="user_name" type="text" class="form-control" placeholder="暱稱">
        </div>
        <span style="visibility: hidden">　</span>
        </p>
        <p>
        <div id="div-email_address" class="input-group">
            <span class="input-group-addon"><i class="icon-envelope"></i></span>
            <input name="email_address" id="email_address" class="form-control" type="text" placeholder="郵箱地址">
        </div>
        <span id="sameUsername" style="color: red;visibility: hidden" >* 帳號已被佔用</span>
        </p>
        <p>
        <div id="div-password" class="input-group">
            <span class="input-group-addon"><i class="icon-key"></i></span>
            <input name="password" id="password" class="form-control" ng-model="pass" type="password" placeholder="設定密碼">
        </div>
        <span style="visibility: hidden">　</span>
        <p>
        <div id="div-password-again" class="input-group">
            <span class="input-group-addon"><i class="icon-key"></i></span>
            <input id="password-again" class="form-control" ng-model="passA" type="password" placeholder="再次輸入密碼">
        </div>
        <span style="color: red" ng-show="pass!=passA">* 保持兩次輸入的密碼一致</span>
        </p>
        <a id="login_to" class="btn btn-block btn-success">
            <i class="glyphicon glyphicon-log-in"></i> 注 冊</a>
    </form>
</div>
<div id="foot-div">

</div>
<script src="../js/pagesJS/regAcc.js"></script>
<script>
    var app = angular.module("myApp",[]);
    app.controller("samePass",function($scope){

    })
</script>
</body>

這裡我引入了AngularJS作為輔助表單驗證的工具,用來繫結兩個密碼框,使使用者保證兩次密碼輸入的一致,這裡不做介紹,在接下來的部落格可能會介紹
javascript程式碼如下:

/* Ajax登入 */
function ajaxLogin(name,id,pass,classes){
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "regAcc.php?user_name=" + name + "&email_address=" + id + "&password=" + pass, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText == "1") {
                removeElem("form1");
                document.getElementById("form-reg").innerHTML = "<h3>歡迎你，" + name + "</h3><img class='img-responsive img-circle' src='../pic/default.jpg'><div id='backTo'><a href='../index.html'>去登入!</a></div>";
            }else{
                var login = document.getElementById("login_to");
                login.setAttribute("class",classes);
                login.innerHTML = "<i class='glyphicon glyphicon-log-in'></i> 注 冊";
                removeElem("warningTip");
                var tips = "發生錯誤,註冊失敗！";
                var form = document.getElementById("form-reg");
                form.insertBefore(alertBox(tips,"warning"),form.childNodes[0]);
            }
        }
    };
    xmlhttp.send();
}

這裡為帳號這一欄繫結一個失去焦點事件:

var user_id = document.getElementById("email_address");
user_id.addEventListener("blur",hasUserName,false);

/* Ajax驗證使用者名稱是否存在 */
function hasUserName(){
    var xmlhttp;
    var tips = document.getElementById("sameUsername");
    var name = document.getElementById("email_address").value;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "hasUserName.php?name="+name, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.responseText == "1") {
                tips.style.visibility = "";
                tips.style.color = "green";
                tips.innerHTML = "* 恭喜你,帳號可以使用!";
            }else {
                tips.style.visibility = "";
                tips.style.color = "red";
                tips.innerHTML = "* 賬號已被佔用!"
            }
        }
    };
    xmlhttp.send();
}

好了 ,完成以上的幾個步驟,試試效果

這裡寫圖片描述

試著拿剛剛註冊的帳號去登入 !

這裡寫圖片描述

Ajax實現簡單的登入驗證與帳號註冊

上一篇部落格介紹了Ajax的GET和POST方法以及上傳檔案的進度條展示,這篇部落格將介紹一個簡單的登入與註冊功能的實現設計HTML 這個是即將成為我畢業設計的一個網站, 在導航欄我添加了兩個註冊和登入的按鈕和按下登入按鈕後彈出的登入框,

python實現簡單登入驗證--三次輸入機會

def login(): i = 1 while True: name = input("請輸入使用者名稱：") if name != "tarena": print('"使用者名稱錯誤，請重新輸入"')

spring-boot整合spring-security實現簡單登入(ajax登入實現)

平常再做一些專案時,有些專案並不需要複雜的登入許可權驗證只需要簡單登入許可權驗證(保證安全可靠的前提下)，找來找去只有spring-security最適合不過了，在spring-boot下配置簡單便捷快速能滿足基本的登入許可權控制需求。第一步：引入spring

Android與SQLite——實現簡單登入

基礎部分，具體步驟，沒有分層，是自己寫在印象筆記裡的，俗簡勿噴。有些地方明白意思但是寫不好，全是自己的理解，專業名詞詞彙量不是很足，主要看程式碼吧。搭建安卓專案就不廢話了，需要一個登入介面，介面的搭建可以從簡，通過兩個EditText和一個Button即可，登入成功後可

ThinkPHP+JQuery實現ajax無重新整理登入驗證（詳解+相關問題）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

PHP+Jquery+Ajax實現使用者登入與退出

session_start(); require_once ('connect.php'); $action = $_GET['action']; if ($action == 'login') { //登入 $user = stripslashes(trim($_POST['user'

【筆記】vue+springboot前後端分離實現token登入驗證和狀態儲存的簡單實現方案

簡單實現 token可用於登入驗證和許可權管理。大致步驟分為：前端登入，post使用者名稱和密碼到後端。後端驗證使用者名稱和密碼，若通過，生成一個token返回給前端。前端拿到token用vuex和localStorage管理，登入成功進入首頁。之後前端每一次許可權操作如跳轉路由，都需要判斷是否存

PHP實現簡單的評論與回復功能還有刪除信息

技術分享 mit [0 ech ges get values width 錯誤我們首先先看一下功能上面黑色的是評論的下面紅色的字體是回復的再來看看怎麽實現的 1.發布評論 <form action="pinglunchili.php" method="po

Python 實現簡單圖片驗證碼登錄

需要 spa tps dem 圖片背景 round alt word exc 朋友說公司要在測試環境做接口測試，登錄時需要傳入正確的圖片的驗證碼，本著懶省事的原則，推薦他把測試環境的圖片驗證碼寫死，我們公司也是這麽做的^_^。勸說無果/(ㄒoㄒ)/~~，只能通過 OCR 技

php實現簡單的驗證碼功能

mage isset pat ech ace ring bcd ont es2017 1.根據php中的GD庫對圖片進行處理，繪制出驗證碼的圖片，code.php中2.表單界面，簡單的session保存及與用戶輸入對比，確定是否驗證正確，form.php中<?php

$.ajax()實現簡單計算器

ctype clas text bmi sub javascrip val numeric put 1、html頁面 a.html <!DOCTYPE html> <html lang="en"> <head> <meta c

Python實現簡單的驗證碼模塊

str spa 註意登錄界面 div 隨機 res 情況我們利用Python的random模塊可以完成隨機產生n位驗證碼的功能，且原理簡單。 1 import random 2 #完成5位隨機驗證碼的生成 3 def valiate1(): 4 st

AJAX實現簡單的讀取文本文檔內容到網頁--AJAX

span css alt rds href innerhtml 編輯器請求 amp 效果圖： Demo.html： <!DOCTYPE html><html lang="en"><head> 　　<meta cha

Python學習—paramiko模塊實現簡單的ssh與sftp

返回 shc tmp dir tro 軟件 utf-8 exec 屏蔽 paramiko模塊 paramiko模塊提供了ssh及sft進行遠程登錄服務器執行命令和上傳下載文件的功能。這是一個第三方的軟件包，使用之前需要安裝。 import paramiko # ssh r

PHP實現簡單的socket與異步應用

ins pos 結構 data timeout 撥號而是 recv tcp 1.socket應用（1）簡單概念　　　　網絡上的兩個程序通過一個雙向的通信連接實現數據的交換，這個連接的一端稱為一個socket。　　建立網絡通信連接至少要一對端口號(socket)。so

Django - CBV裝飾器實現使用者登入驗證 Django 認證裝飾器

一、使用Django自帶的decorator 通常情況，使用函式定義的view,可以直接使用 login_required 直接裝飾 @login_required def index(request): if request.method == "GET": ret

SSM框架整合Apache Shiro，實現安全登入驗證和許可權驗證功能

第一部分 Apache Shiro的簡介 1、什麼是 apache shiro ： Apache Shiro是一個功能強大且易於使用的Java安全框架，提供了認證，授權，加密，和會話管理如同 spring security 一樣都是是一個許可權安全框架，但是與Spri

jQuery + bootstrap 4 簡單登入驗證

簡單的表單驗證bootstrap4自帶的js檔案就可以實現哦 bootstrap.js自帶的表單驗證的效果：下面貼html程式碼 <!DOCTYPE html> <html lang="en"> <head> <met

如何實現頁面登入驗證

現在很多網站在登入的時候都需要輸入驗證碼，現在輸入的驗證碼方式層出不窮有單單是數字的、字母（又分大小寫）的，有數字、字母混合的，有給出運算表示式需要回答結果的，還有的卡片移動組合的...，為什麼要輸入驗證碼呢？其實是為了有效防止對某一個特定註冊/登入使用者用特定程式暴力破解方式進行不斷的登陸嘗試，這

jquery+ajax實現使用者登入案例

jQuery.get(url, [data], [callback], [type]); url : 待載入頁面的URL地址 data : 待發送 Key/value 引數。 &n

Ajax實現簡單的登入驗證與帳號註冊

設計HTML

設計PHP/MySql

Ajax實現功能

註冊

相關推薦