Php+jquery+ajax Implement user Login and exit

php+jquery+ajax Implement User login and exit

This article uses AJAX without refreshing logins and exits, thereby enhancing the user experience. If the user is logged in, display user related login information, or display the login form.

User login and Exit functions are used in many places, and in some projects, we need to use Ajax way to log in, the successful login only refresh the page part, thereby enhancing the user experience. This article will use PHP and jquery to implement login and exit capabilities.

Preparing the Database

In this example we use the MySQL database to create a user table with the following table structure:

?

1 2 3 4 5 6 7 8 9

CREATE TABLE ' user ' (' id ' int (one) not NULL auto_increment, ' username ' varchar ' is not NULL COMMENT ' username ', ' password ' Varc Har () Not null COMMENT ' password ', ' login_time ' int (a) default null COMMENT ' logon time ', ' login_ip ' varchar (#) default NULL comme NT ' logon ip ', ' login_counts ' int (ten) not NULL default ' 0 ' COMMENT ' login count ', PRIMARY KEY (' id ') engine=myisam default charset= UTF8;

Then insert a user information data into the user table:

?

1 2	INSERT into ' user ' (' id ', ' username ', ' password ', ' login_time ', ' login_ip ', ' login_counts ') VALUES (1, ' demo ', ' fe01ce2a7f bac8fafaed7c982a04e229 ', ', ', ', 0;

index.php

After the user enters the username and password, prompts the user to login successfully, and displays the related login information, if clicks "exits", then exits to the user login interface.

Enter the index.php, if the user is logged in to display the login information, if not logged in the Display login box requires the user to log in.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<div id= "Login" >

The next thing to do is, when the input box gets and loses focus, it presents a different style, such as using a different border color in this example, and the code is as follows:

?

1 2 3 4 5 6

$ ("Input:text,textarea,input:password"). focus (function () {$ (this). addclass ("Cur_select");}); $ ("Input:text,textarea,input:password"). blur (function () {$ (this). Removeclass ("Cur_select");});

User login: After the user clicks on the login button, first verify that the user's input cannot be null, and then send an AJAX request to the background login.php. Returns the logon user information, such as the number of user logons and the last logon time, when the background verification login succeeds, and returns the login failure information if the login fails.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

I am in the AJAX request, data transmission format using JSON, the returned data is JSON data, use JS to parse the JSON data, get the user information after login, and then through the append appended to the #login element, complete the login operation.

User exits: When the "Exit" is clicked, send an AJAX request to login.php, log back all sessions in the background, and the page returns to the login interface.

?

1 2 3 4 5 6 7 8 9 10 11 12 13-14

$ ("#logout"). Live (' click ', Function () {$.post ("Login.php?action=logout", Function (msg) {if (msg==1) {$ ("#result"). Remove (); var div = "<div id= ' login_form ' ><p><label> username:</label> <input type= ' text ' class= ' input ' Name= ' user ' id= ' user '/></p> <p><label> password:</label> <input type= ' password ' class= ' Input ' name= ' pass ' id= ' pass '/></p> <div class= ' Sub ' ><input type= ' submit ' class= ' btn ' value= ' login '/ ></div> </div> "; $ ("#login"). Append (div); } }); });

login.php

According to the request submitted by the front desk, when you log in, get the user name and password entered by the user, compare with the corresponding username and password in the database, and if successful, update the user login information and assemble the JSON data to the foreground.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 This is the

Session_Start (); Require_once (' connect.php ');   $action = $_get[' action ']; if ($action = = ' Login ') {//Login $user = stripslashes (Trim ($_post[' user ')); $pass = Stripslashes (Trim ($_post[' pass ')); if (Emptyempty ($user)) {echo ' username cannot be empty '; exit;} if (Emptyempty ($pass)) {echo ' Password cannot be empty '; exit;} $MD 5pass = MD5 ($pass); The password uses MD5 encryption $query = mysql_query ("SELECT * from user where username= ' $user '");   $US = Is_array ($row = mysql_fetch_array ($query));   $ps = $US? $MD 5pass = = $row [' Password ']: FALSE; if ($ps) {$counts = $row [' login_counts '] + 1; $_session[' user ' = $row [' username ']; $_session[' login_time '] = $row [' Login _time ']; $_session[' login_counts ' = $counts; $ip = Get_client_ip (); Get the login IP $logintime = mktime (); $rs = MySql_query ("Update user set Login_time= ' $logintime", login_ip= ' $ip ', login_counts= ' $counts '); if ($rs) {$arr [' success '] = 1; $arr [' msg '] = ' Login successful! '; $arr [' user '] = $_session[' user ']; $arr [' login_time '] = Date (' y-m-d h:i:s ', $_session[' login_time ')); $arr [' login_counts '] = $_session[' login_counts ']; else {$arr [' success '] = 0; $arr [' msg '] = ' logon failed ';}} else {$arr [' success '] = 0; $arr [' msg '] = ' username or password error! '; echo Json_encode ($arr); Output JSON data} elseif ($action = = ' logout ') {//exit unset ($_session); Session_destroy (); Echo ' 1 ';}

When the current request exits, just log off the session and return 1 to the front desk JS for processing. Note that the above code GET_CLIENT_IP () is to obtain the client IP function, limited to the length of the list, you can download the source code view.

Well, a complete set of user login and exit procedures completed, the deficiencies are inevitable, welcome to criticize correct.

The above mentioned is the entire content of this article, I hope you can enjoy.