Example of asynchronous login at the jQuery + Ajax + PHP pop-up layer

The pop-up layer is mainly used to display rich page information, and a better application is the pop-up form layer rich interactive application. Common applications have pop-up login form layer, users submit login information, background verification login successful, pop-up layer disappeared, the main page local refresh user information. In this article we will show you how to use the Jquery+ajax+php pop-up layer for asynchronous login applications.

About the pop-up layer effect, we continue to use the site Helloweba the previous article in the pop-up layer plugin-hwlayer. More flexibility reflected in the binding pop-up layer of the form Submit button events, and then Ajax asynchronous interaction, the last part of the home page refresh, you can see the demo demo. Read this article, you need to have HTML5, CSS3, jquery, and other front-end knowledge, but also need to understand PHP and even MySQL related knowledge.
Html

Because the UI part of this example uses bootstrap and the jquery plug-in, it is necessary to load the relevant files beforehand and recommend that you use the relevant CDN resources.
<link rel= "stylesheet" href= "//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel= "stylesheet" href= "Hwlayer.css" >
Next, we place the button link that triggers the pop-up layer in the HTML body section, as well as the pop-up layer body content. The following are the main HTML code:
<a href= "#0" class= "btn btn-danger btn-lg" id= "form-btn" data-show-layer= "Hw-layer-login" role= "button" > Click on the pop-up login form </a>
<div id= "Result" ></div>

<div class= "Hw-overlay" id= "Hw-layer-login" >
<div class= "Hw-layer-wrap" >
<button type= ' button ' class= ' Close hwlayer-close ' aria-label= ' close ' ><span ' true ' aria-hidden= Span></button>

<div class= "Row" >
<form class= "Form-horizontal" action= "login.php" method= "post" id= "Login-form" >
<div class= "Form-group" >
<div class= "Input-group" >
<div class= "Input-group-addon" ><i class= "Glyphicon glyphicon-user" ></i></div>
<input type= "text" class= "Form-control" name= "Users" id= "user" placeholder= "Please enter username" >
</div>
</div>
<div class= "Form-group" >
<div class= "Input-group" >
<div class= "Input-group-addon" ><i class= "Glyphicon glyphicon-lock" ></i></div>
<input type= "Password" class= "Form-control" name= "password" id= "password" placeholder= "Please enter password" >
</div>
</div>
<div class= "Form-group" >
<div class= "col-md-11 col-md-offset-1" >
<button type= "Submit" class= "btn btn-success hwlayer-ok" > Login </button>
<span id= "MSG" > Username: Helloweba, password:123</span>
</div>
</div>
</form>
</div>
</div>
</div>

In the above code, #result用来展示用户信息, in practical application, we want to display the login username and other related information in the main page. #hw-layer-login is a pop-up content, the default is not visible, it contains a login form, the relevant CSS style please refer to bootstrap website.

When we click on the link or button in the page, we invoke the Hwlayer plugin, triggering the login pop-up layer. First load the jquery and Hwlayer plug-ins.
<script src= "Http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" ></script>

<script src= "Jquery.hwLayer.js" ></script>
Then, invoke the Hwlayer plug-in.
$ (function () {
$ (' #form-btn '). Hwlayer ({
width:480,
Taplayer:false
});
});

Now, the pop-up layer came out, and the key part also came, we fill in the account information, click Login, what will happen? Obviously, as a form submission event, we first verify the legality of the front-end input, where I simply verify that the input cannot be empty. The AJAX is then submitted and the user name and password contents are submitted to the backend login.php for processing. Login.php it verifies that the account information we have filled out is correct and returns the processing results to the front end in JSON format. Then when the front-end received the successful login information, the login results username and login time displayed on the main page #result, that is, realized that everyone often said the local refresh effect, should also close the pop-up layer.

$ (function () {
$ (". Hwlayer-ok"). On (' click ', Function (event) {
Event.preventdefault ();
var user = $ (' #user '). Val ();
var pass = $ (' #password '). Val ();
if (user== ') {
$ (' #msg '). addclass (' Text-danger '). Text (' User name cannot be empty! ');
return false;
}
if (pass== ') {
$ (' #msg '). addclass (' Text-danger '). Text (' Password cannot be empty! ');
return false;
}
$.ajax ({
URL: ' login.php ',
Type: ' POST ',
DataType: ' JSON ',
Data: {Username:user,password:pass},
Beforesend:function () {
$ (' #msg '). addclass (' text-success '). Text (' login ... ');
$ (". Hwlayer-ok"). attr (' disabled ', true);
},
Success:function (res) {
if (res.code==1) {//Login successful
$ (' #result '). HTML (' Welcome, ' + Res.username + ', login time: ' + res.logintime ');
$ (' #msg '). Removeclass (' Text-danger '). addclass (' text-success '). Text (' Login successful! ');
$ (' #hw-layer-login '). Hwlayer (' close ');
}else{
$ (' #msg '). addclass (' Text-danger '). Text (' Username or password is wrong! ');
}
$ (". Hwlayer-ok"). Removeattr (' disabled ');
}
});
});
});

Php

The above Ajax asynchronous operation of course is inseparable from our back-end PHP, when then the language you can choose. login.php receives the user name and password from the front-end post and then verifies that it is correct. Here I lazy, defined username and password, and in practice we should use PHP to read the database such as MySQL user table, compared to the user table information, and in JSON data return to the front end of the login results, see Code:
$username = Stripslashes (Trim ($_post[' username '));
$password = Stripslashes (Trim ($_post[' password '));
if ($username = = ' Helloweba ' && $password = = ' 123 ') {
$res [' code '] = 1;
$res [' username '] = $username;
$res [' logintime '] = Date (' y-m-d h:i ');
}else{
$res [' code '] = 0;
}
echo Json_encode ($res);