本篇文章主要的讲述了关于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) })});
登录后复制
解决火狐不发送ajax请求，刷新验证码没反应的问题
解决办法：加个随机数（图片路径一样 有时候有缓存 图片不会重新加载）原因：js改了线上有缓存的时候 引入js也可以加随机数 清除缓存后台看路径只看问号前面的（想看更多就到PHP中文网栏目中学习）
登录后复制
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页面
登录后复制
看不清，换一张
本篇文章到这就结束了（想看更多就到PHP中文网栏目中学习），有问题的可以在下方留言提问。
登录后复制
以上就是ajax如何制作登录页面？登录页面ajax的请求详解（附完整实例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2741560.html
