首頁 > 後端開發 > php教程 > 怎麼用php+ajax實現使用者登入按鈕加載

怎麼用php+ajax實現使用者登入按鈕加載

little bottle
發布: 2023-04-06 08:22:02
轉載
3083 人瀏覽過

本篇文章使用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影片教學 

 表單提交驗證


#
 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中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板