Ajax erstellt eine teilweise Aktualisierungs-Anmeldefunktion mit Bestätigungscode

Dieses Mal stelle ich Ihnen die Ajax-Teilaktualisierungs-Anmeldefunktion mit Bestätigungscode vor. Was sind die Vorsichtsmaßnahmen für die Ajax-Teilaktualisierungs-Anmeldung mit Bestätigungscode?

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

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, kann die teilweise Aktualisierungsfunktion nicht implementiert werden. Denn wenn die Adresse in src bei jedem Zugriff dieselbe ist, wird sie nicht aktualisiert. Sie können wissen, warum das so ist Gehen Sie und studieren Sie. Die Funktion dieser Aktion besteht darin, den Bestätigungscode zu verwenden, ihn in ein Bild zu packen und ihn an die Quelle im Bild 2 zurückzugeben Bootstrap zum Implementieren des Dialogfelds. 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 js, und der Dialogteil wird mit dem modalen Bootstrap implementiert. >HTML-Dialogteil:

JS-Überprüfungsteil:

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

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

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

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

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>

js-Teil:

Der location.href="http://127.0.0.1:8888/TP/main.jsp" entspricht der Umleitung. Mein Ajax ist es nicht das Ajax im nativen js, aber das von JQuery gekapselte Ajax. Suchen Sie in JQuery nach der $.post()-Anfrage Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website.

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

So senden Sie das Formular ein und Datei-Upload mit Ajax implementieren

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

Ajax So verarbeiten Sie JSON-Daten, die im Hintergrund erfolgreich hochgeladen wurden

<%@ 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 林志强 版权所有 

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