ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)_AJAX相关_

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

 //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中 }); } }); })

 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;//此处返回空 }