Implementation of AJAX local flush login interface with verification code

Now the login interface is mostly with: Verification code function + Verification code local Refresh +ajax login. The advantage of using AJAX to sign in is that the speed is fast and the URL address does not change. All current login features are rarely submitted with form form post, most of which have already used Ajax local access backstage and then parse the return value and display the result to the interface. Theory is still to be validated by practice, the following code directly.

Operating interface:

1. Verification Code background Access part of the previous blog has been introduced, here is how to use IMG src to implement local refresh verification code function.

HTML section:

             <p><label class= "Lbright" > Verification Code:</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 </a>              </p>          

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 () is not able to realize the function of local refresh. This is not an update because SRC has the same address each time it accesses. Specifically why this happens, you can study it yourself. And Codepic is actually an action. The function of this action is to use a Java brush to draw a verification code and package it into a picture returned to the SRC in img.

2. Use the modal in bootstrap to implement the function of the dialog box. Because you need to verify that the user name or password is empty before signing in, if an error occurs, a popup dialog box prompts the user. Here the validation section is implemented with JS, and the dialog box is implemented with Bootstrap modal.

HTML dialog Box section:

<div class= "modal" id= "Mymodal" tabindex= "-1" > <div class= "Modal-dialog" > <div class= "modal-content" & Gt;<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, 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 important thing to note here is whether the imported Css,js file is correct.

3. Using AJAX to implement login functions
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. We can search for a $.post () request in jquery.
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" >all the functions here are finished. Demo Download: Click to open Link
If there is anything unclear or have any questions about the comments can add my QQ 208017534, welcome to communicate together with progress.



Implementation of AJAX local flush login interface with verification code