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

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

本文讲解使用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;
}
赞(0)
声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-62778877-8306;邮箱:fanjiao@west.cn。本站原创内容未经允许不得转载,或转载时需注明出处:西部数码知识库 » php+ajax实现登录按钮加载loading效果

登录

找回密码

注册