찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Ajax는 인증 코드를 사용하여 로그인 인터페이스의 부분 새로 고침을 구현합니다.

Ajax는 인증 코드를 사용하여 로그인 인터페이스의 부분 새로 고침을 구현합니다.

韦小宝
韦小宝원래의
2018-05-14 15:17:243389검색

많은 로그인 인터페이스에는 인증 코드 기능이 있습니다ajax부분 새로 고침 효과. 다음은 이 글을 통해 알려드리겠습니다. ajax인증 코드를 사용한 부분 새로 고침 로그인 인터페이스 구현에 관심이 있는 친구들은 꼭 살펴보세요. together 현재 대부분의 로그인 인터페이스에는 인증 코드 기능 + 인증 코드 부분 새로 고침 + 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=&#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>

여기서 주의해야 할 것은 가져온 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=&#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 林志强 版权所有

위는 부분의 Ajax 구현입니다. 편집자가 소개한 인증 코드로 로그인 인터페이스를 새로 고치세요.

관련 권장 사항:

ajax 로그인 점프 로그인 구현

JQuery ajax 부분 새로 고침 예시

jquery 팝업 창 + Ajax 부분 프롬프트, 처리 방법

위 내용은 Ajax는 인증 코드를 사용하여 로그인 인터페이스의 부분 새로 고침을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Java jquery css ajax bootstrap html 封装 math JS location href http
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：정규 표현식을 사용하여 문자 강조 표시다음 기사：정규 표현식을 사용하여 문자 강조 표시

관련 기사

더보기