De nombreuses interfaces de connexion ont une fonction de code de vérification ajax effet de rafraîchissement partiel. Ensuite, je partagerai avec vous à travers cet article ajax pour implémenter une interface de connexion à rafraîchissement partiel avec code de vérification, pour <.>ajaxPour ceux qui sont intéressés, jetons un coup d'oeil
La plupart des interfaces de connexion actuelles ont : fonction de code de vérification + actualisation partielle du code de vérification + connexion ajax. L’avantage le plus évident de la connexion avec ajax est qu’elle est rapide et que l’adresse URL ne change pas. De nos jours, la fonction de connexion utilise rarement la soumission du formulaire. La plupart d'entre eux ont utilisé ajax pour accéder à l'arrière-plan localement, puis analysent la valeur de retour et affichent le résultat sur l'interface. La théorie reste à mettre en pratique pour être vérifiée. Passons directement au code. Interface d'exécution : 1. La partie accès en arrière-plan du code de vérification a été introduite dans le blog précédent. Voici comment utiliser src dans img pour y parvenir. Fonction de rafraîchissement partiel du code de vérification. partie html :<p><label class="lbright">验证码:</label> <span> <input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/> <img id="codePic" src="http://127.0.0.1:8888/TP/codePic" width="60" height="21" style="vertical-align:middle;cursor:pointer;"/> </span> <a class="blurry" id="newPic" onclick="getPic();">看不清楚,换一张</a> </p>
<script type="text/javascript"> function getPic(){ $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); }; </script>
partie de vérification js :
fichiers css et js qui doivent être importés :<p class="modal" id="mymodal" tabindex="-1"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">亲,您好</h4> </p> <p class="modal-body" id="dialogs"> <p></p> </p> <p class="modal-footer"> <button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center; padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;">我知道了 </button> </p> </p><!-- /.modal-content --> </p><!-- /.modal-dialog --> </p><!-- /.modal -->
<script type="text/javascript"> function dialog(){ $("#mymodal").modal("toggle"); }; function login(){ var userName=document.getElementById("username").value; var pwd=document.getElementById("password").value; var validcode=document.getElementById("validcode").value; var matchResult=true; if(userName==""){ document.getElementById("dialogs").innerHTML="<h3>用户账号不能为空!</h3>"; dialog(); matchResult=false; }else if(pwd==""){ document.getElementById("dialogs").innerHTML="<h3>用户密码不能为空!</h3>"; dialog(); matchResult=false; }else if(validcode==""){ document.getElementById("dialogs").innerHTML="<h3>验证码不能为空!</h3>"; dialog(); matchResult=false; }else if(userName.length<6||userName.length>20){ document.getElementById("dialogs").innerHTML="<h3>用户名长度应在6到20个字符之间!</h3>"; dialog(); matchResult=false; }else if(pwd.length<6||pwd.length>20){ document.getElementById("dialogs").innerHTML="<h3>密码或重复密码长度应在6到20个字符之间!</h3>"; dialog(); matchResult=false; } }; </script>
3. Utilisez ajax pour implémenter la fonction de connexion
<link href="css/global.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src='js/jquery-1.9.1.js'></script> <script src="js/jquery.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script>
Le location.href="http://127.0.0.1:8888/TP/main.jsp" équivaut à une redirection. l'ajax dans le js natif mais l'ajax encapsulé par JQuery. Allez chercher la requête $.post() dans JQuery Actualisez partiellement l'interface de connexion, j'espère que cela sera utile à tout le monde ! Recommandations associées :
<p class="submitcon"> <input type="button" value="登 录" style="height:45px;width:130px;margin-top:15px;color: #FFFFFF;background-color:#FB8F02;font-size: 20px; padding:5px;border: 3px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;text-align:center;" onclick="login();"/> </p>
<script type="text/javascript"> function login(){ var userName=document.getElementById("username").value; var pwd=document.getElementById("password").value; var validcode=document.getElementById("validcode").value; var matchResult=true; if(userName==""){ document.getElementById("dialogs").innerHTML="<h3>用户账号不能为空!</h3>"; dialog(); matchResult=false; }else if(pwd==""){ document.getElementById("dialogs").innerHTML="<h3>用户密码不能为空!</h3>"; dialog(); matchResult=false; }else if(validcode==""){ document.getElementById("dialogs").innerHTML="<h3>验证码不能为空!</h3>"; dialog(); matchResult=false; }else if(userName.length<6||userName.length>20){ document.getElementById("dialogs").innerHTML="<h3>用户名长度应在6到20个字符之间!</h3>"; dialog(); matchResult=false; }else if(pwd.length<6||pwd.length>20){ document.getElementById("dialogs").innerHTML="<h3>密码或重复密码长度应在6到20个字符之间!</h3>"; dialog(); matchResult=false; } if(matchResult==true){ $.post("http://127.0.0.1:8888/TP/usersAction?method=login", {usersName:userName,password:pwd, validcode:validcode},function(data,status){ var error=data.error; var result=data.result; getPic(); if(error=="error"){ errors="true"; document.getElementById("dialogs").innerHTML="<h3>验证码错误,请重新输入!</h3>"; dialog(); } if(result=="0"){ document.getElementById("dialogs").innerHTML="<h3>您输入的用户名不存在!</h3>"; document.getElementById("username").value=""; dialog(); }else if(result=="1"){ document.getElementById("dialogs").innerHTML="<h3>您输入的密码错误,请重新输入!</h3>"; document.getElementById("password").value=""; dialog(); }else if(result=="2"){ document.getElementById("dialogs").innerHTML="<h3>您的管理员权限不够!</h3>"; dialog(); }else if(result=="3"){ location.href="http://127.0.0.1:8888/TP/main.jsp"; } },"json"); } }; </script>
Instance d'actualisation partielle ajax JQuery
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>无标题文档 <link href="css/global.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="css/bootstrap.min.css"> <script src='js/jquery-1.9.1.js'></script> <script src="js/jquery.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <p class="modal" id="mymodal" tabindex="-1"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">亲,您好</h4> </p> <p class="modal-body" id="dialogs"> <p></p> </p> <p class="modal-footer"> <button type="button" data-dismiss="modal" style="color: #FFFFFF;background-color:#FB8F02; text-align:center; padding:10px;border: 1px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;">我知道了 </button> </p> </p><!-- /.modal-content --> </p><!-- /.modal-dialog --> </p><!-- /.modal -->
大学二手交易平台管理系统
BBW综合管理系统
<p><label class="lbright">验证码:</label> <span> <input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/> <img id="codePic" src="http://127.0.0.1:8888/TP/codePic" width="60" height="21" style="vertical-align:middle;cursor:pointer;"/> </span> <a class="blurry" id="newPic" onclick="getPic();">看不清楚,换一张</a> </p> <p class="submitcon"> <input type="button" value="登 录" style="height:45px;width:130px;margin-top:15px;color: #FFFFFF;background-color:#FB8F02;font-size: 20px; padding:5px;border: 3px solid #dedede;-moz-border-radius: 15px;-webkit-border-radius: 15px; border-radius:15px;vertical-align:middle;text-align:center;" onclick="login();"/> </p>
Copyright 2015-2016 林志强 版权所有
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!