How does Ajax make a login page? Login page Ajax request details (with full example)

This article focuses on the AJAX request content for the Ajax login page, so let's take a look at this article.

Login Page Ajax Request

One, login authentication prompt information

Submit Login Information Sub.on (' Click ', Function (e) {e.preventdefault (); var username=$ ('. Login_box #Account '). Val () var password=$ ('. Login_box #Password '). Val () var captchacode=$ (' . Login_box #Capcode '). Val () var param = {' username ': username, ' password ':p assword, ' captchacode ': captchacode};//cons        Ole.log ("Request param =" +json.stringify (param));            $.ajax ({type: "post", url: '/hjrz-webapp/app/admin/dologin ', DataType: ' JSON ', ContentType: "Application/json", Cache:false, Data:JSON.stringify (param),}). Done (function (            Result) {//Console.log ("++++" + json.stringify (result)); if (Result.code = = ' 0 ') {$ ('. Error5 '). HTML (') $ ('. Error6 '). HTML (') $ ('. Error 7 '). HTML (') window.location.href= '/hjrz-webapp/app/admin/index '} else if (result.cod E = = ' 0100 ') {$ ('. Error5 '). HTML (RESULT.MESSAGe) $ ('. Error6 '). HTML (') $ ('. Error7 '). html (')} else if (Result.code = = ' 0101 ') {$ ('. Error6 '). HTML (result.message) $ ('. Error5 '). HTML (') $ ('. Error7 '). html (')} else if (Result.code = = ' 0102 ') {$ ('. Error5 '). HTML (') $ ( '. Error6 '). HTML (') $ ('. Error7 '). html (result.message)} else if (Result.code = = ' 0103 ') {$ ('. Error5 '). HTML (') $ ('. Error6 '). HTML (') $ ('. Error7 '). HTML (Result.messa                GE)} else if (Result.code = = ' 0104 ') {$ ('. Error5 '). HTML (result.message)            $ ('. Error6 '). HTML (result.message) $ ('. Error7 '). html (')}}). Fail (function () {        Console.log (' fail ');        }); })

Second, verification code local refresh

$ (document). Ready (function () {    var sub=$ ('. Sub input ')    var yzm=$ ('. Reg-box li a ')    var yimg=$ ('. Reg-box li IMG ')    yzm.on (' click ', Function () {        var num=math.random () *10;        Yimg.attr (' src ', ' captchacode? ') +num)    })    Yimg.on (' click ', Function () {        var num=math.random () *10;        Yimg.attr (' src ', ' captchacode? ') +num)})    ;

Solve the problem that Firefox does not send Ajax requests, refresh the verification code does not respond

Workaround: Add a random number (image path and   Sometimes there are cached  pictures do not reload) Reason: JS changed the line has a cache when the   introduction of JS can also add random numbers Clear the cache background look at the path just before the question mark (want to see more on the topic.alibabacloud.com column to learn)

Ajax Request Picture

$ (". Reg-box li img"). Click (function () {         var url = "Captchacode";         var data = {Type:1};         $.ajax ({          type: "Get",          async:false,///sync request          Url:url,          //Data:data,          timeout:1000,          success: function (dates) {          //alert (dates);          $ (". Reg-box li img") [0].src= "Captchacode";//To Refresh the img          },          error:function () {                ///Alert ("Failed, please try again later!) ");              }         });     });

login.jsp page

<p class= "Login_box" > <ul class= "Reg-box" > <li> <label for= "" > Account </label> <input id= "Account" type= "text" name= "username" placeholder= "Please enter your username" class= "accounts" maxlength= "one"/> &l T;span class= "Error Error5" ></span> </li> <li> <label for= "" > Password </label&gt        ; <input id= "Password" type= "Password" name= "Password" class= "admin_pwd" placeholder= "Please enter the password"/> <span class= " Error Error6 "></span> </li> <li> <label for=" "> Verification Code </label><input id=" Capcode "type=" text "name=" Captchacode "class=" Sradd photokey "placeholder=" Please enter the verification code "/>  <p class= "Tip" > <span class= "error error7" ></span> <a > Can't see, change a &L t;/a> </p> </li> </ul> <p class= "sub" > <input type= "button" value= "Login Now Record "/> </p></p> 

 This is the end of this article (want to see more on the topic.alibabacloud.com column to learn), there are questions can be in the bottom of the message to ask questions.