jquery+ajax+php pop-up layer Asynchronous login effect (source download) _jquery

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.

Effect Display source Download

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" > 

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 Aria-hidden= "true" >x</span></button> 
 

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.

Jquery

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> 

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) {//Logon success 
$ (' #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; 
} 

The above is a small set to introduce the Jquery+ajax+php pop-up layer of asynchronous login effect (with source code download) of the relevant knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!