Shulou(Shulou.com)06/03 Report--

This article is about how to use ajax to complete the asynchronous verification of the user name on the SSH online mall. I think it is very practical, so I share it for you to learn. I hope you can get something after reading this article.

First of all, ajax completes whether the user name is asynchronously checked, so what should we do? Here, we want to be triggered by the event, that is to say, when we type in the user name, the mouse moves away, and this event is called onblur, that is, losing focus. In contrast, the mouse is placed inside to get focus, and we call it onfocus. So what should we do if we lose focus? First, go to the registration page, find the code for the user name on the registration page, add onblur=checkUsername () to the end, and verify the user name. Then we write the method checkUsername, as shown below:

Function checkUsername () {/ / get text box value: var username = document.getElementById ("username") .value; / / 1, create asynchronous interactive object var xhr = createXmlHttp (); / / 2, set listening xhr.onreadystatechange = function () {if (xhr.readyState = = 4) {if (xhr.status = = 200) {document.getElementById ("span1") [xss_clean] = xhr.responseText / / 3. Open the connection xhr.open ("GET", "${pageContext.request.contextPath} / user_findByName.action?time=" + new Date (). GetTime () + "& username=", true) / / 4, send xhr.send (null);} function createXmlHttp () {var xmlHttp; try {xmlHttp = new XMLHttpRequest () } catch (e) {try {xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");} catch (e) {try {xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");} catch (e) {} return xmlHttp;}

Next, let's build an entity Vo to implement model-driven and automatic encapsulation. The specific code is as follows:

Package cn.itcast.shop.user.vo; public class User {private Integer uid; private String username; private String password; private String name; private String email; private String phone; private String addr; private Integer state; private String code; public Integer getUid () {return uid;} public void setUid (Integer uid) {this.uid = uid;} public String getUsername () {return username;} public void setUsername (String username) {this.username = username } public String getPassword () {return password;} public void setPassword (String password) {this.password = password;} public String getName () {return name;} public void setName (String name) {this.name = name;} public String getEmail () {return email;} public void setEmail (String email) {this.email = email;} public String getPhone () {return phone } public void setPhone (String phone) {this.phone = phone;} public String getAddr () {return addr;} public void setAddr (String addr) {this.addr = addr;} public Integer getState () {return state;} public void setState (Integer state) {this.state = state;} public String getCode () {return code;} public void setCode (String code) {this.code = code }}

We need to receive the parameters and implement the model driver. ActionSupport can directly implement modelDriven. Then we need to write our ajax code, which needs to be submitted to action. Let's write the code in UserAction, as shown below:

Package cn.itcast.shop.user.action; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import cn.itcast.shop.user.service.UserService; import cn.itcast.shop.user.vo.User; import com.opensymphony.xwork2.ActionSupport; import com.opensymphony.xwork2.ModelDriven / * the class of user module Action * @ author Flower * * / public class UserAction extends ActionSupport implements ModelDriven {/ / the object used by the model driver private User user = new User (); public User getModel () {return user;} / / inject UserService private UserService userService; public void setUserService (UserService userService) {this.userService=userService } / * Jump to the execution method of the registration page * / public String registPage () {return "registPage";} / * the execution method of ajax to asynchronously verify the user name * @ throws IOException * / public String findByName () throws IOException {/ / call Service to query User existUser = userService.findByUsername (user.getUsername ()) / / get the response object and output HttpServletResponse response = ServletActionContext.getResponse (); response.setContentType ("text/html;charset=UTF-8") to the page; / / determine if (existUser! = null) {/ / query the user: the user name already exists response.getWriter () .println ("user name already exists") } else {/ / did not find the user: the user name can be found using response.getWriter (). Println ("the user name already exists");} return NONE;} / * register with the user: * / public String regist () {return NONE;}}

Next, all we need to do is configure service and Dao into applicationContext, with the code as follows:

After the configuration is completed, we need to complete the query in UserDao. The specific code is as follows:

Package cn.itcast.shop.user.dao; import org.springframework.orm.hibernate3.support.HibernateDaoSupport; import java.util.List; import cn.itcast.shop.user.vo.User; / * user module persistence layer code * @ author Flower * * / public class UserDao extends HibernateDaoSupport {/ / query by rank whether the user public User findByUsername (String username) {String hql = "from User where username=?"; List list=this.getHibernateTemplate () .find (hql,username) If (list! = null & & list.size () > 0) {return list.get (0);} return null;}}

Next, we need to complete the call to Dao in service, as shown in the following code:

Package cn.itcast.shop.user.service; import org.springframework.transaction.annotation.Transactional; import cn.itcast.shop.user.dao.UserDao; import cn.itcast.shop.user.vo.User; / * user module business layer code * @ author Flower * * / @ Transactional public class UserService {/ / inject UserDao private UserDao userDao; public void setUserDao (UserDao userDao) {this.userDao = userDao } / / the method of querying users by user name public User findByUsername (String username) {return userDao.findByUsername (username);}}

Then we need to make the call in UserAction, as shown in the following code:

Package cn.itcast.shop.user.action; import java.io.IOException; import javax.servlet.http.HttpServletResponse; import org.apache.struts2.ServletActionContext; import cn.itcast.shop.user.service.UserService; import cn.itcast.shop.user.vo.User; import com.opensymphony.xwork2.ActionSupport; import com.opensymphony.xwork2.ModelDriven / * the class of user module Action * @ author Flower * * / public class UserAction extends ActionSupport implements ModelDriven {/ / the object used by the model driver private User user = new User (); public User getModel () {return user;} / / inject UserService private UserService userService; public void setUserService (UserService userService) {this.userService=userService } / * Jump to the execution method of the registration page * / public String registPage () {return "registPage";} / * the execution method of ajax to asynchronously verify the user name * @ throws IOException * / public String findByName () throws IOException {/ / call Service to query User existUser = userService.findByUsername (user.getUsername ()) / / get the response object and output HttpServletResponse response = ServletActionContext.getResponse (); response.setContentType ("text/html;charset=UTF-8") to the page; / / determine if (existUser! = null) {/ / query the user: the user name already exists response.getWriter () .println ("user name already exists") } else {/ / did not find the user: the user name can be found using response.getWriter (). Println ("the user name already exists");} return NONE;} / * register with the user: * / public String regist () {return NONE;}}

Finally, let's write the contents of the mapping file, as shown in the following code:

Don't forget to accompany her to applicationContext. The specific code is as follows:

Org.hibernate.dialect.MySQLDialect true true false update cn/itcast/shop/user/vo/User.hbm.xml

This is the end of the code, the following is to show you the effect picture:

The above is how to use ajax to complete the asynchronous verification of the user name on the SSH online mall. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.