Ajax implementiert eine teilweise Aktualisierung der Anmeldeschnittstelle mit Bestätigungscode

Viele Anmeldeschnittstellen verfügen über eine Verifizierungscodefunktion Ajax, teilweise Aktualisierungseffekt. Als Nächstes werde ich Ihnen durch diesen Artikel Ajax die Implementierung einer teilweisen Aktualisierungs-Anmeldeschnittstelle mit Verifizierungscode für AjaxFür diejenigen, die interessiert sind, werfen wir einen Blick darauf

Die meisten aktuellen Anmeldeschnittstellen verfügen über: Bestätigungscode-Funktion + Teilaktualisierung des Bestätigungscodes + Ajax-Anmeldung. Der offensichtlichste Vorteil der Anmeldung mit Ajax besteht darin, dass sie schnell ist und sich die URL-Adresse nicht ändert. Heutzutage verwendet die Anmeldefunktion selten die Formular-Post-Übermittlung. Die meisten von ihnen haben Ajax verwendet, um lokal auf den Hintergrund zuzugreifen und dann den Rückgabewert zu analysieren und das Ergebnis auf der Schnittstelle anzuzeigen. Die Theorie muss noch in die Praxis umgesetzt werden, um überprüft zu werden. Gehen wir direkt zum Code.

Run-Schnittstelle:

1. Der Hintergrundzugriffsteil für den Bestätigungscode wurde im vorherigen Blog eingeführt. Hier erfahren Sie, wie Sie src in img verwenden teilweise Aktualisierung. Bestätigungscode-Funktion.

HTML-Teil:

<p><label class="lbright">验证码：</label>
<span>
<input type="text" name="validcode" style="width:70px; vertical-align:middle;" id="validcode"/>
<img  src="/static/imghwm/default1.png"  data-src="http://127.0.0.1:8888/TP/codePic"  class="lazy"  id="codePic"     style="max-width:90%"  style="max-width:90%" style="vertical-align:middle;cursor:pointer;"/ alt="Ajax implementiert eine teilweise Aktualisierung der Anmeldeschnittstelle mit Bestätigungscode" > 
</span> 
<a class="blurry" id="newPic" onclick="getPic();">看不清楚，换一张</a>
</p>

JS-Teil:

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

Der wichtigste Teil dieses Teils ist $("#codePic").attr("src ", "http://127.0.0.1:8888/TP/codePic?flag="+Math.random()); Dieser Teil des Codes. Wenn Sie flag="+Math.random()" nicht hinzufügen, können Sie die teilweise Aktualisierungsfunktion nicht realisieren. Denn wenn die Adresse in src bei jedem Zugriff dieselbe ist, wird sie nicht aktualisiert. Sie können es wissen Warum das passiert. CodePic ist eigentlich eine Aktion. Die Funktion dieser Aktion besteht darin, den Bestätigungscode zu zeichnen und ihn in das Bild zurückzugeben Modal im Bootstrap, um das Dialogfeld zu implementieren. Da vor der Anmeldung überprüft werden muss, ob der Benutzername oder das Kennwort leer ist, muss ein Dialogfeld angezeigt werden, um den Benutzer dazu aufzufordern Mit js implementiert, und der Dialogteil wird mit dem modalen Bootstrap implementiert. >HTML-Dialogteil:

JS-Überprüfungsteil:

CSS- und JS-Dateien, die importiert werden müssen :

<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 id="亲-您好">亲，您好</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 -->

Was hier beachtet werden muss, ist: Sind die importierten CSS- und JS-Dateien korrekt?

<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 id="用户账号不能为空">用户账号不能为空！</h3>";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="<h3 id="用户密码不能为空">用户密码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="<h3 id="验证码不能为空">验证码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="<h3 id="用户名长度应在-到-个字符之间">用户名长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="<h3 id="密码或重复密码长度应在-到-个字符之间">密码或重复密码长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
} 
};
</script>

3. Verwenden Sie Ajax, um die Anmeldefunktion zu implementieren.

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

HTML-Teil:

js-Teil:

Der location.href="http://127.0.0.1:8888/TP/main.jsp" entspricht der Umleitung Mein Ajax ist nicht der Ajax im nativen JS, sondern der von JQuery gekapselte Ajax. Aktualisieren Sie die Anmeldeschnittstelle teilweise. Ich hoffe, dass dies für alle hilfreich ist 🎜>Verwandte Empfehlungen:

<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 id="用户账号不能为空">用户账号不能为空！</h3>";
dialog();
matchResult=false; 
}else if(pwd==""){ 
document.getElementById("dialogs").innerHTML="<h3 id="用户密码不能为空">用户密码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(validcode==""){ 
document.getElementById("dialogs").innerHTML="<h3 id="验证码不能为空">验证码不能为空！</h3>";
dialog();
matchResult=false; 
}else if(userName.length<6||userName.length>20){ 
document.getElementById("dialogs").innerHTML="<h3 id="用户名长度应在-到-个字符之间">用户名长度应在6到20个字符之间！</h3>";
dialog();
matchResult=false; 
}else if(pwd.length<6||pwd.length>20){ 
document.getElementById("dialogs").innerHTML="<h3 id="密码或重复密码长度应在-到-个字符之间">密码或重复密码长度应在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 id="验证码错误-请重新输入">验证码错误，请重新输入！</h3>";
dialog();
}
if(result=="0"){
document.getElementById("dialogs").innerHTML="<h3 id="您输入的用户名不存在">您输入的用户名不存在！</h3>";
document.getElementById("username").value="";
dialog();
}else if(result=="1"){
document.getElementById("dialogs").innerHTML="<h3 id="您输入的密码错误-请重新输入">您输入的密码错误，请重新输入！</h3>";
document.getElementById("password").value="";
dialog();
}else if(result=="2"){
document.getElementById("dialogs").innerHTML="<h3 id="您的管理员权限不够">您的管理员权限不够！</h3>";
dialog();
}else if(result=="3"){
location.href="http://127.0.0.1:8888/TP/main.jsp";
} 
},"json");
} 
};
</script>

Ajax-Login-Jump-Login-Implementierung

JQuery-Ajax-Teilaktualisierungsinstanz

<%@ 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 id="亲-您好">亲，您好</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  src="/static/imghwm/default1.png"  data-src="http://127.0.0.1:8888/TP/codePic"  class="lazy"  id="codePic"     style="max-width:90%"  style="max-width:90%" style="vertical-align:middle;cursor:pointer;"/ alt="Ajax implementiert eine teilweise Aktualisierung der Anmeldeschnittstelle mit Bestätigungscode" > 
</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-Popup-Fenster + teilweise Ajax-Eingabeaufforderung, wie man damit umgeht

Das obige ist der detaillierte Inhalt vonAjax implementiert eine teilweise Aktualisierung der Anmeldeschnittstelle mit Bestätigungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!