按钮触发php ajax请求,怎样用php+ajax实现用户登录按钮加载

本篇文章使用php+ajax技术实现登录按钮加载loading效果，一个提高用户体验，二个避免重复提交表单，ajax判断加载是否完成，本文具有一定参考价值，感兴趣的朋友可以参考一下。

登录表单

1

2

3

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

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}

表单提交验证

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 }