Ajax crée une fonction de connexion d'actualisation partielle avec un code de vérification

Cette fois, je vais vous présenter la fonction d'Ajax pour effectuer une connexion d'actualisation partielle avec code de vérification. Quelles sont les précautions à prendre pour qu'Ajax effectue une connexion d'actualisation partielle avec code de vérification ? Voici un cas pratique, 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(), vous ne pourrez pas réaliser la fonction de rafraîchissement partiel. 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 renvoyer au src dans l'img. modal dans le 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 à effectuer la vérification. implémenté avec js, et la partie dialogue est implémentée avec la partie modale de bootstrap. >partie de dialogue html :

partie de vérification js :

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

fichiers css et js qui doivent être importés :

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

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

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 :

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

Le location.href="http://127.0.0.1:8888/TP/main.jsp" équivaut à une redirection. n'est pas l'ajax dans le js natif mais l'ajax encapsulé par JQuery. Allez rechercher la requête $.post() dans JQuery

login.jsp code complet :

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

I. Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php

Lecture recommandée :

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>



<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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 -->
<p class="logincontainer">
</p><p class="logintitle">大学二手交易平台管理系统</p>
<p class="loginbg">
</p><p class="loginfmbg">
</p><p class="sysname">BBW综合管理系统</p>
<p class="loginfm">
</p><p><label class="lbright">用户名：</label>
<span class="spinput"><input type="text" name="usersName" id="username"></span>
</p>
<p><label class="lbright">密 码：</label>
<span class="spinput"><input type="password" name="password" id="password"></span></p>
<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></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>
<p></p>
<p></p>
<p class="copyright">Copyright 2015-2016 林志强 版权所有 </p>
<p></p>

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

Comment faire. soumettre le formulaire et mettre en œuvre le téléchargement de fichiers avec ajax

ajax Comment traiter les données JSON téléchargées par le succès en arrière-plan

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!