The traditional method of user name verification in ajax and the $. post method in jquery (for example), jquery. post

The traditional method of user name verification in ajax and the $. post method in jquery (for example), jquery. post

First: Traditional ajax asynchronous requests, background code and effects are at the bottom

First, create a registration page regist in eclipse. jsp: create a form. Note that because we only implement the user name verification effect, the red Department below is the object we need to study, so other departments can ignore it.

The content is as follows:

<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html> 
Method 2: Use ajax in jQuery to achieve the above effect. First, the form and Action remain unchanged. We only need to change the script.
Step 1:Introduce js file <script type = "text/javascript" src = "$ {pageContext. request. contextPath}/js/jquery-3.2.1.min.js"> </script>
Step 2:
// Whether the ajax asynchronous request username exists $ (function () {$ ('# username '). change (function () {// Add a change event var val =$ (this) to username ). val (); // get the value of the input box val = $. trim (val); // empty if (val! = "") {// Determines whether the value is null var url = "$ {pageContext. request. contextPath}/user_findByName.action "; // url or the URLvar args = {" time ": new Date (). getTime (), "username": val}; // the difference here is that the input time and username parameters $ are implemented in json format. post (url, args, function (data) {// send a postrequest, and the data returned after the request is in data('?span'}.html (data); // put the data returned in the background in the span });}});})
Then let's take a look at how the background data returns. As this is implemented using the ssh framework, for convenience, I only show how data is returned in the Action. For details about the implementation of the service layer and dao layer in the ssh framework, please solve it by yourself.
Public class UserAction extends ActionSupport implements ModelDriven <User> {private static final long serialVersionUID = 1L;/*** model driver */private User user = new User (); @ Overridepublic User getModel () {return user;} // inject UserServiceprivate UserService userService; public void setUserService (UserService userService) {this. userService = userService ;}
/*** Method for Asynchronous User Name Verification Using AJAX *** @ throws IOException */public String findByName () throws IOException {User existUser = userService. findByName (user. getUsername (); // call the service-layer method to return the queried objects in the database. // obtain the response object and output the following to the page: HttpServletResponse response = ServletActionContext. getResponse (); response. setContentType ("text/html; charset = UTF-8"); // sets the encoding format // determines whether the returned object is null if (existUser! = Null) {// If yes, the user is queried: the user name already has response. getWriter (). println ("the user name already exists");} else {// If not, the user name can use response. getWriter (). println ("<font color = 'green'> User name can be used </font>");} return NONE; // null is returned here}
The effect is as follows:


The above ajax implements the user name verification tradition and jquery's $. the post method (for example) is a small part of the Content shared to everyone. I hope you can give us a reference and support the house of helping customers.