How to create a login page with ajax? Detailed explanation of ajax request on login page (with complete example)

寻∝梦

Release： 2018-09-10 15:04:31

Original

1905 people have browsed it

This article mainly talks about the content of ajax request when ajax login page. Now let’s take a look at this article

Login page ajax request

1. Login verification prompt information

//提交登录信息sub.on(&#39;click&#39;,function(e){
        e.preventDefault();        var username=$(&#39;.login_box #Account&#39;).val()        var password=$(&#39;.login_box #Password&#39;).val()        var captchaCode=$(&#39;.login_box #Capcode&#39;).val()        var param = {&#39;username&#39;:username,&#39;password&#39;:password,&#39;captchaCode&#39;:captchaCode};// console.log("Request param = "+JSON.stringify(param));
        $.ajax({
            type:"post",
            url:&#39;/hjrz-webapp/app/admin/dologin&#39;,
            dataType: &#39;json&#39;,
            contentType:"application/json",
            cache : false,
            data: JSON.stringify(param),
        }).done(function(result){
            // console.log("++++" + JSON.stringify(result));
            if(result.code == &#39;0&#39;){
                $(&#39;.error5&#39;).html(&#39;&#39;)
                $(&#39;.error6&#39;).html(&#39;&#39;)
                $(&#39;.error7&#39;).html(&#39;&#39;)
                window.location.href=&#39;/hjrz-webapp/app/admin/index&#39;
            }            else if(result.code == &#39;0100&#39;){
                $(&#39;.error5&#39;).html(result.message)
                $(&#39;.error6&#39;).html(&#39;&#39;)
                $(&#39;.error7&#39;).html(&#39;&#39;)
            }            else if(result.code == &#39;0101&#39;){
                $(&#39;.error6&#39;).html(result.message)
                $(&#39;.error5&#39;).html(&#39;&#39;)
                $(&#39;.error7&#39;).html(&#39;&#39;)
            }            else if(result.code == &#39;0102&#39;){
                $(&#39;.error5&#39;).html(&#39;&#39;)
                $(&#39;.error6&#39;).html(&#39;&#39;)
                $(&#39;.error7&#39;).html(result.message)
            }            else if(result.code == &#39;0103&#39;){
                $(&#39;.error5&#39;).html(&#39;&#39;)
                $(&#39;.error6&#39;).html(&#39;&#39;)
                $(&#39;.error7&#39;).html(result.message)
            }            else if(result.code == &#39;0104&#39;){
                $(&#39;.error5&#39;).html(result.message)
                $(&#39;.error6&#39;).html(result.message)
                $(&#39;.error7&#39;).html(&#39;&#39;)
            }
        }).fail(function(){
            console.log(&#39;fail&#39;);
        });    
    })

Copy after login

2. Partial refresh of verification code

$(document).ready(function(){

    var sub=$(&#39;.sub input&#39;)    var yzm=$(&#39;.reg-box li a&#39;)    var yimg=$(&#39;.reg-box li img&#39;)
    yzm.on(&#39;click&#39;,function(){
        var num=Math.random()*10;
        yimg.attr(&#39;src&#39;,&#39;captchaCode?&#39;+num)
    })
    yimg.on(&#39;click&#39;,function(){
        var num=Math.random()*10;
        yimg.attr(&#39;src&#39;,&#39;captchaCode?&#39;+num)
    })
});

Copy after login

Solution to the problem that Firefox does not send an ajax request and refreshes the verification code but does not respond

解决办法：加个随机数
（图片路径一样   有时候有缓存  图片不会重新加载）
原因：
js改了线上有缓存的时候   引入js也可以加随机数 清除缓存
后台看路径只看问号前面的（想看更多就到PHP中文网栏目中学习）

Copy after login

ajax request image

$(".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("失败，请稍后再试！");
              }
         });
     });

Copy after login

login.jsp page

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

Copy after login

本篇文章到这就结束了（想看更多就到PHP中文网栏目中学习），有问题的可以在下方留言提问。

Copy after login

The above is the detailed content of How to create a login page with ajax? Detailed explanation of ajax request on login page (with complete example). For more information, please follow other related articles on the PHP Chinese website!