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:
<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>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 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. 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='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>
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>用户账号不能为空！</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><%@ 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 林志强 版权所有
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!
