Ajax implémente une interface de connexion à actualisation partielle avec code de vérification

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>

partie js :

<script type="text/javascript">
function getPic(){ 
$("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); 
};
</script>

La partie la plus importante de cette partie est $("#codePic").attr("src ", "http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); Cette partie du code. Si vous n'ajoutez pas flag="+Math.random(), la fonction d'actualisation partielle ne peut pas être implémentée. Parce que si l'adresse dans src est la même à chaque accès, elle ne sera pas mise à jour. Vous pouvez savoir pourquoi cela se produit. Allez étudier. CodePic est en fait une action. La fonction de cette action est d'utiliser le pinceau Java pour dessiner le code de vérification et le conditionner dans une image et le renvoyer au src dans l'img. bootstrap pour implémenter la boîte de dialogue. Parce qu'il est nécessaire de vérifier si le nom d'utilisateur ou le mot de passe est vide avant de se connecter. Si une erreur se produit, une boîte de dialogue doit apparaître pour inviter l'utilisateur. La partie vérification est implémentée avec. js, et la partie de dialogue est implémentée avec la partie de dialogue modal. >html de bootstrap :

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 -->

Ce qu'il faut noter ici est-ce que les fichiers CSS et js importés sont corrects ?

<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=&#39;js/jquery-1.9.1.js&#39;></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

partie html :

partie js :

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>

implémentation de la connexion par saut de connexion ajax

<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=&#39;js/jquery-1.9.1.js&#39;></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 林志强 版权所有 

jquery fenêtre pop-up + invite partielle ajax, comment y faire face

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!