Know the front end--ajax Login

In this article, you will log on using AJAX.

first, server-side code

is_user.php:

<?PHPrequire' Config.php '; $query=mysql_query("Select name from user WHERE name= ' {$_post[' User ']} ' ") or die(' SQL Error! ‘); if(Mysql_fetch_array($query,Mysql_assoc)) {        Echo' False '; } Else {        Echo' True '; }        Mysql_close();?>

login.php:

<?PHPrequire' Config.php '; $_pass=SHA1($_post[' Login_pass ']); $query=mysql_query("SELECT name,pass from user WHERE name= ' {$_post[' Login_user ']} ' and Pass= ' {$_pass} ' ") or die(' SQL Error! ‘); if(Mysql_fetch_array($query,Mysql_assoc)) {        Echo' True '; } Else {        Echo' False '; }        Mysql_close();?>

Note: Jquery.validate.js plug-in is obtained by UTF-8 no BOM format encoding, and our PHP file is encoded in ANSI/UTF-8 format, so in some circumstances, to set UTF8 no BOM format encoding, otherwise validation can not be reminded.

Second, the login part of the code

HTML code:

<formID= "Login"title= "Member Login">    <olclass= "Login_error"></ol>    <P>        <label for= "User">Account:</label>        <inputtype= "text"name= "Login_user"class= "text"ID= "Login_user"></input>        <spanclass= "Star">*</span>    </P>    <P>        <label for= "Pass">Password:</label>        <inputtype= "Password"name= "Login_pass"class= "text"ID= "Login_pass"></input>        <spanclass= "Star">*</span>    </P>    <P>        <inputtype= "checkbox"name= "Expires"ID= "Expires"checked= "Checked"></input>        <label for= "Expires">Valid for one week after login</label>    </P></form>

jquery Code:

//Login$ ("#login_a"). Click (function() {    $("#login"). Dialog ("Open"));}); $("#login"). dialog ({autoOpen:false, modal:true, resizable:false, Width:320, Height:240, buttons:{' Login ':function() {            //Alert ($ ("#expires"). Is (": checked"));$( This). Submit (); }}). Validate ({//The jquery.validate.js plugin is encoded in UTF-8 without BOM format, and our PHP file is encoded in ANSI/UTF-8 format.Submithandler:function(form) {//alert ("Verify success, prepare for submission!") ");$ (form). Ajaxsubmit ({URL:"Login.php", type:"POST", Beforesubmit:function(formdata,jqform,options) {//before committing, open the "data in Interactive ..." dialog box                //after opening, the height is added by default by 30, so when initializing the dialog, the height should be-30, become$ ("#loading"). Dialog ("Open")); //Alert ($ ("#reg"). Dialog ("widget"). html ());                //Alert ($ ("#reg"). Dialog ("widget"). Find ("button"). EQ (0). html ());//<span class= "ui-button-icon-primary Ui-icon Ui-icon-closethick "></span><span class=" Ui-button-text ">Close</span>                //Alert ($ ("#reg"). Dialog ("widget"). Find ("button"). EQ (1). html ());//<span class= "Ui-button-text" > Submit </ Span>$ ("#login"). Dialog ("widget"). Find ("button"). EQ (1). button ("Disable");//Disable the Submit button}, Success:function(responsetext,statustext) {//alert (responsetext);//New success, return 1                if(responsetext) {$ ("#login"). Dialog ("widget"). Find ("button"). EQ (1). Button ("Enable"); $("#loading"). CSS ("Background", "url (img/success.gif) no-repeat 20px Center"). HTML ("User login successful ..."); //check box is selected after signing in for one week                    //set the cookie expiration time to 7 days                    if($ ("#expires"). Is (": Checked") {$.cookie ("User", $ ("#login_user"). Val (), {expires:7                        }); } Else{$.cookie ("User", $ ("#login_user"). Val ()); } setTimeout (function() {                        $("#loading"). Dialog ("Close"); $("#login"). Dialog ("Close"); $("#login"). Resetform ();//Resetting the form$ ("#login Span.star"). HTML ("*"). Removeclass ("SUCC")); $("#loading"). CSS ("Background", "url (img/loading.gif) no-repeat 20px Center"). HTML ("Data interaction ..."); $("#member, #logout"). Show (); $("#reg_a, #login_a"). Hide (); $("#member"). HTML ($.cookie ("user"))); }, 1000);    }            }        }); },    //error prompt appears, dialog box height increases, scroll bar appears, so scroll bar should be removed    //This property is triggered for each activation errorShowErrors:function(Errormap, errorlist) {varErrors = This. Numberofinvalids (); if(Errors > 0) {            $("#login"). Dialog ("option", "height", errors * 20 + 240); } Else {            $("#login"). Dialog ("option", "height", 240); }         This. Defaultshowerrors ();//Execute default error    },    //highlight elements with errors, color-changingHighlightfunction(Element,errorclass) {$ (Element). CSS ("Border", "1px solid #630"); $ (Element). Parent (). Find ("span"). HTML ("*"). Removeclass ("Succ").); },    //Restore DefaultUnhighlight:function(Element,errorclass) {$ (Element). CSS ("Border", "1px solid #ccc"); //element is a <input> control        //$ (Element). The parent (). FIND ("span"). HTML ("OK");$ (Element). The parent (). FIND ("span"). HTML ("&nbsp;"). AddClass ("SUCC"); }, Errorlabelcontainer:"Ol.login_error", wrapper:"Li", rules:{login_user:{required:true, minlength:2,}, login_pass:{required:true, minlength:6, remote:{URL:"Login.php", type:"POST", data:{login_user:function() {                        return$ ("#login_user"). Val (); }}}}, messages:{login_user:{required:"Account must not be empty!" ", minlength:"Account must not be less than {0} bits!" ",}, login_pass:{required:"The password must not be empty!" ", minlength:"The password must not be less than {0} bits!" ", Remote:"The account or password is not correct!" "        }    }});

Know the front end--ajax Login