이번에는 인증코드를 사용한 Ajax 부분 새로고침 로그인 기능을 가져왔습니다. 인증코드를 사용한 Ajax 부분 새로고침 로그인 시 주의사항은 무엇인가요?
현재 로그인 인터페이스의 대부분은 인증 코드 기능 + 인증 코드 부분 새로 고침 + Ajax 로그인을 갖추고 있습니다. ajax로 로그인할 때의 가장 확실한 이점은 속도가 빠르고 URL 주소가 변경되지 않는다는 것입니다. 요즘 로그인 기능은 제출 후 양식을 거의 사용하지 않습니다. 대부분은 ajax를 사용하여 로컬로 백그라운드에 액세스한 다음 반환 값을 구문 분석하고 결과를 인터페이스에 표시합니다. 검증을 위해서는 이론을 실제로 적용해야 합니다.
실행 인터페이스:
1. 이전 블로그에서는 이미 인증 코드 백그라운드 액세스 부분을 소개했습니다. 여기서는 img에서 src를 사용하여 인증 코드를 부분적으로 새로 고치는 방법을 소개합니다.
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>
js 부분:
<script type="text/javascript">
function getPic(){
$("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic?flag="+Math.random());
};
</script>이 부분에서 가장 중요한 부분은 $("#codePic").attr("src","http://127.0.0.1:8888/TP/codePic입니다. ?flag ="+Math.random()); 코드의 이 부분입니다. flag="+Math.random()을 추가하지 않으면 부분 새로 고침 기능을 구현할 수 없습니다. src에 있는 주소가 액세스할 때마다 동일하면 업데이트되지 않기 때문입니다. 왜 이런 일이 발생하는지 알아보십시오. CodePic은 실제로 동작입니다. 이 동작의 기능은 Java 브러시를 사용하여 확인 코드를 작성하고 이를 img의 src에 패키징하는 것입니다. 로그인 기능을 제출하기 전에 사용자 이름이나 비밀번호가 비어 있는지 확인해야 하며, 오류가 발생하면 사용자에게 묻는 대화 상자가 나타나야 하며, 대화 상자 부분은 js로 구현됩니다. bootstrap의 모달 부분:
<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 -->
js 검증 부분:
<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>가져와야 하는 CSS 및 js 파일:
<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>
여기서 주의해야 할 것은 가져온 CSS 및 js 파일이 올바른지 여부입니다. . ajax를 사용하여 로그인 기능을 구현합니다.
<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>
js 부분:
<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>location.href="http://127.0.0.1:8888/TP/main.jsp"는 My ajax와 동일합니다. 기본 js의 ajax는 아니지만 JQuery에 의해 캡슐화되어 있습니다. JQuery에서 $.post() 요청을 검색할 수 있습니다.
login.jsp 전체 코드:
<%@ 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 林志强 版权所有
읽고 나면 방법을 익히셨을 것입니다. 이 기사의 사례에 대해 더 알아보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요.
추천 도서:
ajax에서 양식 제출 및 파일 업로드 구현 방법 ajax 백그라운드 성공으로 업로드된 json 데이터를 처리하려면위 내용은 Ajax는 인증 코드를 사용하여 부분 새로 고침 로그인 기능을 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
