ajax如何製作登入頁面？登入頁面ajax的請求詳解（附完整執行個體）

本篇文章主要的講述了關於ajax登入頁面時ajax請求的內容，現在我們一起來看看這篇文章吧

登入頁面ajax請求

一、登入驗證提示資訊

//提交登入資訊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':password,'captchaCode':captchaCode};// console.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('')                $('.error7').html('')                window.location.href='/hjrz-webapp/app/admin/index'            }            else if(result.code == '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.message)            }            else if(result.code == '0104'){                $('.error5').html(result.message)                $('.error6').html(result.message)                $('.error7').html('')            }        }).fail(function(){            console.log('fail');        });        })

二、驗證碼局部重新整理

$(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)    })});

解決Firefox不發送ajax請求，重新整理驗證碼沒反應的問題

解決辦法：加個隨機數（圖片路徑一樣   有時候有緩衝  圖片不會重新載入）原因：js改了線上有緩衝的時候   引入js也可以加隨機數 清除緩衝後台看路徑只看問號前面的（想看更多就到topic.alibabacloud.com欄目中學習）

ajax請求圖片

$(".reg-box li img").click(function(){         var url = "captchaCode";         // var data = {type:1};         $.ajax({          type : "get",          async : false, //同步請求          url : url,          // data : data,          timeout:1000,          success:function(dates){          //alert(dates);          $(".reg-box li img")[0].src="captchaCode";//要重新整理的img          },          error: function() {                // alert("失敗，請稍後再試！");              }         });     });

login.jsp頁面

<p class="login_box">   <ul class="reg-box">      <li>        <label for="">賬  號</label>        <input id="Account" type="text" name="username" placeholder="請輸入您的帳號" class="account" maxlength="11"/>        <span class="error error5"></span>      </li>      <li>        <label for="">密  碼</label>        <input id="Password" type="password" name="password" class="admin_pwd" placeholder="請輸入密碼"/>        <span class="error error6"></span>      </li>      <li>        <label for="">驗證碼</label><input id="Capcode" type="text" name="captchaCode" class="sradd photokey" placeholder="請輸入驗證碼" />        <img src="captchaCode">        <p class="tip">            <span class="error error7"></span>            <a >看不清，換一張</a>        </p>      </li>   </ul>   <p class="sub">       <input type="button" value="立即登入" />    </p></p>

本篇文章到這就結束了（想看更多就到topic.alibabacloud.com欄目中學習），有問題的可以在下方留言提問。