Ajax to achieve simple login verification and account Registration __ajax

The previous blog introduced the Ajax Get and post methods as well as the upload file progress bar show, this blog will introduce a simple login and registration function of the implementation design HTML

This is going to be my graduation design of a website,

In the navigation bar I have added two registration and login buttons and the login button that pops up after the login box, which constitutes a simple login window

Code as follows: need to introduce 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 "> ;d IV class= "Modal-header" > <button type= "button" class= "Close" data-dismiss= "modal" aria-hidden= "Tru"
            E ">&times;</button> 
 
Design Php/mysql 
This is mainly about Ajax, PHP and SQL are directly attached to the code:

<?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 NOT NULL,
  ' user_pass ' varchar ' is not NULL,
  ' user_name ' varchar ( Not NULL,
  ' user_icon ' varchar (1000) CHARACTER SET UTF8 COLLATE utf8_unicode_ci not null
) Engine=myisam T Charset=utf8;


INSERT into ' user ' (' user_id ', ' user_pass ', ' user_name ', ' User_icon ') VALUES
(' chation99 ', ' q12we3 ', ' Chiapas ', ' pic/ Userhead/qx.jpg '),
(' admin001 ', ' wsad2428210 ', ' admin 001 ', ' pic/userhead/bq2.jpg ');


ALTER TABLE ' user '
  ADD PRIMARY KEY (' user_id ');
 
Ajax Implementation Features 
According to the PHP code we have written, when we get data to PHP will return 0, or a record, we need to pass the judgement, if the 0 words on behalf of the login failure, account or password error, if the return of a record, we need to analyze this record to "|" To split the semicolon, split the result into account number, username, and avatar address.

First initialize Ajax, in order to facilitate the binding of Ajax to the Login button event function, we need to abstract it into a function, parameters for the user entered the account number and password

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 =) {
            //do so Mething..
        }
    };
    Xmlhttp.send ();
}
 
Here, the point we need to make is//dosomething here!

First, we judge the return value, if it is 0 to prove the login failure, do the appropriate operation, if for a record, we analyze the record and do the appropriate operation

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 =) {
            if (XML Http.responsetext!= 0) {
                var textarray = xmlhttp.responseText.split ("|");
                Split the string into an array with the split () function
                //next do something.
            } else{
               //do something ...
            }}
    ;
    Xmlhttp.send ();
}
 
This basically completes the login verification, we add some website response, most of the code I have introduced in my another blog
js--Note-bootstrapcss with bootstrap form interactive modification style

/* Modify INPUT Style * * 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> is landing ...";
            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 login/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 = "
<?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 _nam E ', ' pic/default.jpg ');

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

$conn->close ();

? >
 
Registration successfully returned 1, failure returned 0; The registration page is as follows:


<body> <div id= "Head-div" > <a href= ".
/index.html "><span class=" Icon-music style= "Font-size:xx-large" ></span></a> </div>