本篇文章使用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视频教程
立即学习“PHP免费学习笔记（深入）”；
表单提交验证
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怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
108
收藏
