Wie erstelle ich eine Anmeldeseite mit Ajax? Detaillierte Erläuterung der Ajax-Anfrage auf der Anmeldeseite (mit vollständigem Beispiel)

寻∝梦

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

Original

1850 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um den Inhalt der Ajax-Anfrage bei der Ajax-Anmeldeseite. Schauen wir uns nun diesen Artikel

Anmeldeseite Ajax-Anfrage

1. Informationen zur Anmeldebestätigung

//提交登录信息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;);
        });    
    })

Nach dem Login kopieren

2. Teilweise Aktualisierung des Bestätigungscodes

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

Nach dem Login kopieren

Das Problem, dass Firefox keine Ajax-Anfrage sendet und den Bestätigungscode aktualisiert, wurde behoben

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

Nach dem Login kopieren

Ajax-Anfragebild

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Anmeldeseite mit Ajax? Detaillierte Erläuterung der Ajax-Anfrage auf der Anmeldeseite (mit vollständigem Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!