php+ajax를 사용하여 사용자 로그인 버튼을 로드하는 방법

이 글은 로그인 버튼의 로딩 효과를 얻기 위해 php+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 비디오 튜토리얼

양식 제출 확인

 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+ajax를 사용하여 사용자 로그인 버튼을 로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!