php+ajax实现登录按钮加载loading效果

php+ajax实现登录按钮加载loading效果，一个提高用户体验，二个避免重复提交表单，ajax判断加载是否完成。

登录表单

 <form onsubmit="return check_login()" style="text-align: center;margin-top:50px">
     <input value="登 录"   class="btn_submit" id="btn_submit" type="submit">
 </form>

表单提交按钮和按钮失效样式

 .btn_submit {
     background-color: #e31436;
     color: #fff;
     cursor: pointer;
     display: inline-block;
     font-size: 18px;
     height: 44px;
     line-height: 44px;
     text-align: center;
     width: 200px;
     border-radius: 2px;
     border:none
 }
 .disabled{opacity: 0.5;cursor:default}

表单提交验证

 function check_login() {
     if ($("#btn_submit").hasClass("disabled"));//避免重复提交
     return false;
     $("#btn_submit").addClass("disabled").val("正在提交");
     $.post("login.php", {id: 1}, function(data) {
         $("#btn_submit").removeClass("disabled").val("登 录");
         location.href = "http://www.sucaihuo.com/php/2747.html";
     }, "json");
     return false;
 }

相关实例源码下载：https://www.sucaihuo.com/php/2747.html