ajax uses $.post method to verify user name

This time I will bring to you how ajax uses $.post method to verify user name. Ajax uses $.post method to verify user name.What are the things to note?The following is a practical case. Get up and take a look.

The first type: traditional ajax asynchronous request, the background code and effects are at the bottom

First we create a ## in eclipse #Registration pageregist.jsp, create a form form. Note that since we only implement the effect of user name verification, the red department below is the object we need to study, so other departments can be ignored.

The content is as follows:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>        
  
 
 
 
 
会员注册
 
小米商城
 
 
 
 
 //第一步：首先，我们创建一个用户名input输入框，并添加一个onblur="checkUsername()"事件 
用 户 名: 
 
密 码: 
 
确认 密码: 
 
邮 箱 号: 
 
姓 名: 
 
手 机 号: 
 
地 址: 
 
 
验 证 码: 
 
 
 
 
 
  
 
 
 
  

The second way: use ajaxinjQuery to achieve the above effect. First of all, the form and Action remain unchanged, we only need to change the script.

Step one:Introduce js file

Step 2:

//ajax异步请求用户名是否存在 $(function(){ $('#username').change(function(){//给username添加一个change事件 var val = $(this).val();//获取输入框的值 val = $.trim(val);//去空 if(val != ""){//判断值是否为空 var url = "${pageContext.request.contextPath}/user_findByName.action";//url还是那个URL var args ={"time":new Date().getTime(),"username":val};//这里和上面不同的是，这里用json方式实现传入的time和username参数 $.post(url,args,function(data){//发送post请求，后台返回的数据在data里面， $('#span').html(data);//把后台返回的数据放入span中 }); } }); })

Then let’s take a look at how the background data will be returned. Since I am implementing this using the ssh framework, for the sake of convenience, I only show how to return data in Action. Regarding the implementation of the service layer and dao layer in the ssh framework, please solve it yourself.

public class UserAction extends ActionSupport implements ModelDriven { private static final long serialVersionUID = 1L; /** * 模型驱动 */ private User user = new User(); @Override public User getModel() { return user; } // 注入UserService private UserService userService; public void setUserService(UserService userService) { this.userService = userService; }

/** * AJAX进行异步校验用户名的执行方法 * * @throws IOException */ public String findByName() throws IOException { User existUser = userService.findByName(user.getUsername());//调用service层的方法返回数据库中查询出来的对象 // 获得response对象,向页面输出: HttpServletResponse response = ServletActionContext.getResponse(); response.setContentType("text/html;charset=UTF-8");//设置编码格式 // 判断返回的对象是否为空 if (existUser != null) { // 如果有，查询到该用户:用户名已经存在 response.getWriter().println("用户名已经存在"); } else { // 如果没有，用户名可以使用 response.getWriter().println("用户名可以使用"); } return NONE;//此处返回空 }

The effect is as follows:

##I believe you have read the case in this article After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!

Recommended reading:

##How to use an elegant solution for front-end ajax requests accomplish

The above is the detailed content of ajax uses $.post method to verify user name. For more information, please follow other related articles on the PHP Chinese website!