Comment utiliser php+ajax pour charger le bouton de connexion utilisateur

Cet article utilise la technologie php+ajax pour obtenir l'effet de chargement du bouton de connexion. L'un est d'améliorer l'expérience utilisateur et l'autre est d'éviter la soumission répétée du formulaire. Ajax détermine si le chargement est terminé. a une certaine valeur de référence et les amis intéressés peuvent s'y référer.

Formulaire de connexion

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>

Bouton d'envoi du formulaire et bouton invalide Style

 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}

Tutoriels associés : Tutoriel vidéo ajax

Vérification de la soumission du formulaire

 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 }

Tutoriels associés : Tutoriel vidéo PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!