Ajax implements partial refresh login interface with verification code, and ajax login interface

Source: Internet
Author: User
Tags form post

Ajax implements partial refresh login interface with verification code, and ajax login interface

Currently, most logon interfaces include: Verification Code Function + Verification Code Partial refresh + ajax logon. The most obvious advantage of using ajax to log on is that the speed is fast and the URL address remains unchanged. Currently, most of the login functions are rarely submitted using form post. Most of them have used ajax for partial access to the background, parse the returned values, and display the results on the interface. The theory still needs to be used for verification. The following code is used directly.

Running interface:


1. I have introduced more about accessing the verification code background in the previous blog. Here I will introduce how to use src in img to implement the function of refreshing the verification code locally.

Html section:

<p> <label class = "lbright"> Verification code: </ 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();"> Unclear, change one </a>
</ p>
js part:

<script type = "text / javascript">
function getPic () {
$ ("#codePic") .attr ("src", "http://127.0.0.1:8888/TP/codePic?flag=" + Math.random ());
};
</ script>
The most important part of this part is $ ("#codePic") .attr ("src", "http://127.0.0.1:8888/TP/codePic?flag=" + Math.random ()); this part of the code . If you don't add flag = "+ Math.random (), you can't implement the partial refresh function. Because if the address of each access is the same in src, it will not update. The specific reason why this happens, you can do it yourself. To study. And codePic is actually an action. The function of this action is to use the java brush to draw the verification code and package it into an image and return it to the src in the img.

2. Use the modal in bootstrap to realize the function of the dialog box. Because you need to verify whether the user name or password is empty before submitting the login, if there is an error, you need to pop up a dialog box to prompt the user. Here the verification part is implemented with js, and the dialog part is implemented with bootstrap modal.

html dialog part:

<div class = "modal" id = "mymodal" tabindex = "-1">
<div class = "modal-dialog">
<div class = "modal-content">
<div 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"> Dear, hello </ h4>
</ div>
<div class = "modal-body" id = "dialogs">
<p> </ p>
</ div>
<div 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; "> I got it
</ button>
</ div>
</ div> <!-/.modal-content->
</ div> <!-/.modal-dialog->
</ div> <!-/.modal->
js verification part:

<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> User account cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (pwd == "") {
document.getElementById ("dialogs"). innerHTML = "<h3> User password cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (validcode == "") {
document.getElementById ("dialogs"). innerHTML = "<h3> Verification code cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (userName.length <6 || userName.length> 20) {
document.getElementById ("dialogs"). innerHTML = "<h3> User name length should be between 6 and 20 characters! </ h3>";
dialog ();
matchResult = false;
} else if (pwd.length <6 || pwd.length> 20) {
document.getElementById ("dialogs"). innerHTML = "<h3> Password or repeated password should be between 6 and 20 characters! </ h3>";
dialog ();
matchResult = false;
}
};
</ script>
The css and js files to be imported:

<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>
It should be noted here that the imported CSS and js files are correct.

3. Use ajax to realize the login function

html part:

<div class = "submitcon">
<input type = "button" value = "Login" 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 ();" />
</ div>
js part:

<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> User account cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (pwd == "") {
document.getElementById ("dialogs"). innerHTML = "<h3> User password cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (validcode == "") {
document.getElementById ("dialogs"). innerHTML = "<h3> Verification code cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (userName.length <6 || userName.length> 20) {
document.getElementById ("dialogs"). innerHTML = "<h3> User name length should be between 6 and 20 characters! </ h3>";
dialog ();
matchResult = false;
} else if (pwd.length <6 || pwd.length> 20) {
document.getElementById ("dialogs"). innerHTML = "<h3> Password or repeated password length should be between 6 and 20 characters! </ 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> Verification code error, please re-enter! </ h3>";
dialog ();
}
if (result == "0") {
document.getElementById ("dialogs"). innerHTML = "<h3> The username you entered does not exist! </ h3>";
document.getElementById ("username"). value = "";
dialog ();
} else if (result == "1") {
document.getElementById ("dialogs"). innerHTML = "<h3> The password you entered is incorrect, please re-enter! </ h3>";
document.getElementById ("password"). value = "";
dialog ();
} else if (result == "2") {
document.getElementById ("dialogs"). innerHTML = "<h3> Your administrator rights are not enough! </ h3>";
dialog ();
} else if (result == "3") {
location.href = "http://127.0.0.1:8888/TP/main.j
sp ";
}
}, "json");
}
};
</ script>
Here location.href = "http://127.0.0.1:8888/TP/main.jsp" is equivalent to redirection. My ajax is not ajax in native js but ajax encapsulated by JQuery. You can search for $ .post () request in JQuery.

The entire code of login.jsp:

<% @ page language = "java" import = "java.util. *" pageEncoding = "UTF-8"%>
<% @ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core"%>
<! DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 Transitional // EN">
<html>
<head>
<title> Untitled document </ title>
<meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
<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>
</ head>
<body>
<div class = "modal" id = "mymodal" tabindex = "-1">
<div class = "modal-dialog">
<div class = "modal-content">
<div 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"> Dear, hello </ h4>
</ div>
<div class = "modal-body" id = "dialogs">
<p> </ p>
</ div>
<div 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; "> I got it
</ button>
</ div>
</ div> <!-/.modal-content->
</ div> <!-/.modal-dialog->
</ div> <!-/.modal->
<div class = "logincontainer">
<div class = "logintitle"> University second-hand trading platform management system </ div>
<div class = "loginbg">
<div class = "loginfmbg">
<div class = "sysname"> BBW comprehensive management system </ div>
<div class = "loginfm">
<p> <label class = "lbright"> Username: </ label>
<span class = "spinput"> <input type = "text" name = "usersName" id = "username" /> </ span>
</ p>
<p> <label class = "lbright"> Password: </ label>
<span class = "spinput"> <input type = "password" name = "password" id = "password" /> </ span> </ p>
<p> <label class = "lbright"> Verification code: </ 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();"> Unclear, change one </a>
</ p>
</ div>
<div class = "submitcon">
<input type = "button" value = "Login" 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 ();" />
</ div>
</ div>
</ div>
<div class = "copyright"> Copyright 2015-2016 Lin Zhiqiang All rights reserved </ div>
</ div>
</ body>
<script type = "text / javascript">
function getPic () {
$ ("#codePic") .attr ("src", "http://127.0.0.1:8888/TP/codePic?flag=" + Math.random ());
};
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> User account cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (pwd == "") {
document.getElementById ("dialogs"). innerHTML = "<h3> User password cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (validcode == "") {
document.getElementById ("dialogs"). innerHTML = "<h3> Verification code cannot be empty! </ h3>";
dialog ();
matchResult = false;
} else if (userName.length <6 || userName.length> 20) {
document.getElementById ("dialogs"). innerHTML = "<h3> User name length should be between 6 and 20 characters! </ h3>";
dialog ();
matchResult = false;
} else if (pwd.length <6 || pwd.length> 20) {
document.getElementById ("dialogs"). innerHTML = "<h3> Password or repeated password length should be between 6 and 20 characters! </ 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> Verification code error, please re-enter! </ h3>";
dialog ();
}
if (result == "0") {
document.getElementById ("dialogs"). innerHTML = "<h3> The username you entered does not exist! </ h3>";
document.getElementById ("username"). value = "";
dialog ();
} else if (result == "1") {
document.getElementById ("dialogs"). innerHTML = "<h3> The password you entered is incorrect, please re-enter! </ h3>";
document.getElementById ("password"). value = "";
dialog ();
} else if (result == "2") {
document.getElementById ("dialogs"). innerHTML = "<h3> Your administrator rights are not enough! </ h3>";
dialog ();
} else if (result == "3") {
location.href = "http://127.0.0.1:8888/TP/main.jsp";
}
}, "json");
}
};
</ script>
</ html>
The above is the Ajax that I introduced to you to implement a partial refresh login interface with a verification code. I hope it will be helpful to everyone. If you have any questions, please leave a message for me. The editor will respond to you in time. Thank you very much for your support to the helper home website!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.