您的位置 首页 php

怎样用php+ajax实现用户登录按钮加载

本篇文章使用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}

相关教程:ajax视频教程

表单提交验证

 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 = "http://www.sucaihuo.com/php/2747.html";  8     }, "json");  9     return false; 10 }

相关教程:PHP视频教程

以上就是怎样用php+ajax实现用户登录按钮加载的详细内容,更多请关注求知技术网其它相关文章!

文章来源:智云一二三科技

文章标题:怎样用php+ajax实现用户登录按钮加载

文章地址:https://www.zhihuclub.com/5485.shtml

关于作者: 智云科技

热门文章

网站地图