ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)
下面小编就为大家分享一篇ajax实现用户名校验的传统和jquery的$.post方式的实例讲解，具有很好的参考价值，希望对大家有所帮助
第一种：传统的ajax异步请求，后台代码以及效果在最下边
首先我们在eclipse中创建一个注册页面regist.jsp,创建一个form表单，注意，由于我们只是实现用户名校验的效果，下边红色部门是我们需要研究对象，所以其他的部门可以忽略不看。
内容如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>用户注册
第二种方式：使用jQuery中的ajax实现以上效果。首先form表单以及Action中的都不变，我们只需改变script就可以了。
第一步：引入js文件
第二步：
//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中 }); } }); })然后我们来看一下后台数据上会怎么返回的。由于我这是使用ssh框架实现的，为了方便，所以我只展示在Action中是怎么返回数据的，关于ssh框架中service层，dao层的实现请自行解决。
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;//此处返回空 }效果如下：
以上这篇ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持html中文网。
标签：