Ajax implements partial refresh login interface with verification code-JS Tutorial-php.cn

Ajax implements partial refresh login interface with verification code

韦小宝

Release： 2018-05-14 15:17:24

Original

3203 people have browsed it

Many login interfaces have a verification code functionajaxPartial refresh effect. Next, I will share with you through this articleajaxRealize partial refresh login interface with verification code, forajaxInterested friends, let’s take a look

Most of the current login interfaces have: verification code function + partial refresh of verification code + ajax login. The most obvious benefit of logging in with ajax is that it is fast and the URL address does not change. Nowadays, the login function rarely uses form post submission. Most of them have used ajax to access the background locally and then parse the return value and display the result on the interface. The theory still needs to be put into practice to be verified. Let’s go directly to the code.

Run interface:

1. The verification code background access part has been introduced in the previous blog. Here we introduce how to use src in img to achieve partial refresh. Verification code function.

html part:

验证码：看不清楚，换一张

Copy after login

js part:

Copy after login

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(), the partial refresh function cannot be implemented. Because if the address in src is the same every time it is accessed, it will not be updated. You can know why this happens. Go and study. 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 a picture and return it to the src in the img.

2. Use the modal in bootstrap to implement the dialog box. Function. Because it is necessary to verify whether the user name or password is empty before logging in. If an error occurs, a dialog box needs to pop up to prompt the user. The verification part is implemented with js, and the dialog part is implemented with bootstrap modal

##. #html dialog part:

Copy after login

js verification part:

Copy after login

css and js files that need to be imported:

Copy after login

What you need to pay attention to here is the imported CSS and js files Is it correct?

3. Use ajax to implement the login function

html part:

Copy after login

js part:

Copy after login

here location.href="http: //127.0.0.1:8888/TP/main.jsp" is equivalent to redirection. My ajax is not the ajax in the native js but the ajax encapsulated by JQuery. You can search for $.post in JQuery ( ) Request.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 无标题文档

大学二手交易平台管理系统

BBW综合管理系统

用户名：

密码：

验证码：看不清楚，换一张

Copy after login

The above is the Ajax implementation of partial refresh login interface with verification code introduced by the editor. I hope it will be helpful to everyone. !

Related recommendations:

##ajax login jump login implementation

##JQuery ajax partial refresh example

jquery pop-up window + ajax partial prompt, how to deal with it

The above is the detailed content of Ajax implements partial refresh login interface with verification code. For more information, please follow other related articles on the PHP Chinese website!