本文讲解使用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; }