摘要:本篇教程探讨了PHP语言入门之PHP+ajax实现登录按钮加载loading效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了PHP语言入门之PHP+ajax实现登录按钮加载loading效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
php+ajax实现登录按钮加载loading效果,一个提高用户体验,二个避免重复提交表单,ajax判断加载是否完成。
登录表单
1 <form onsubmit="return check_login()" style="text-align: center;margin-top:50px">
2 <input value="登 录" class="btn_submit" id="btn_submit" type="submit">
3 </form>
表单提交按钮和按钮失效样式
1 .btn_submit {
2 background-color: #e31436;
3 color: #fff;
4 cursor: pointer;
5 display: inline-block;
6 font-size: 18px;
7 height: 44px;
8 line-height: 44px;
9 text-align: center;
10 width: 200px;
11 border-radius: 2px;
12 border:none
13 }
14 .disabled{opacity: 0.5;cursor:default}
表单提交验证
1 function check_login() {
2 if ($("#btn_submit").hasClass("disabled"));//避免重复提交
3 return false;
4 $("#btn_submit").addClass("disabled").val("正在提交");
5 $.post("login.php", {id: 1}, function(data) {
6 $("#btn_submit").removeClass("disabled").val("登 录");
7 location.href = "//www.sucaihuo.com/php/2747.html";
8 }, "json");
9 return false;
10 }
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号