Ajax implements a local flush login interface with Authenticode _ajax related

Now most of the login interface with: Verification code features + authentication code local Refresh +ajax login. The advantage of using AJAX to log in is that it is fast and the URL address does not change. All the login features are rarely submitted with the form form post, and most have already used Ajax local access background and then parse the return value and display the results to the interface. Theory is still to be brought to practice to verify that the following directly on the code.

Run the interface:

1. Verification Code background Access part of the blog has been introduced a lot, here describes how to use IMG in the SRC implementation of local refresh verification code function.

HTML section:

<p><label class= "Lbright" > Authenticode:</label>
<span>
<input type= "text" Name= " Validcode "style=" width:70px; Vertical-align:middle "id=" Validcode "/>  </span> <a class= "Blurry id=" Newpic "onclick=" Getpic 
(); " > can not see Clearly, change a piece </a>

JS section:

<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 is $ ("#codePic"). attr ("src", "http://127.0.0.1:8888/TP/codePic?flag=" +math.random ()); This part of the code. If you do not add flag= "+math.random () can not achieve the function of local refresh. Since SRC, if the address of each visit is the same, there will be no updates. The specific reason why this happens is that you can study it yourself. And Codepic is actually an action. The function of this action is to use a Java brush to draw the verification code and package it into a picture to return to the IMG src.

2. Use the modal in bootstrap to implement the function of the dialog box. Because you need to verify that the username or password is empty before the login is committed, if there is an error, a pop-up dialog box prompts the user. Here the verification part uses the JS implementation, the dialog part uses the bootstrap modal realization.

HTML dialog Box section:

<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 ">x</span><span class=" Sr-only ">close</span></button >
 
 

JS Verification section:

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

CSS and JS files that need 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>

The only thing to note here is whether the imported Css,js file is correct.

3. Use AJAX to implement login function

HTML section:

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

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

Here the location.href= "http://127.0.0.1:8888/TP/main.jsp" function is equivalent to redirection. My Ajax is not native JS Ajax but jquery encapsulated Ajax. You can search for a search in jquery $.post () request.

login.jsp All code:

<%@ 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" >