下面小编就为大家分享一篇ajax实现用户名校验的传统和jquery的$.post方式的实例讲解，具有很好的参考价值，希望对大家有所帮助
第一种：传统的ajax异步请求，后台代码以及效果在最下边
首先我们在eclipse中创建一个注册页面regist.jsp,创建一个form表单，注意，由于我们只是实现用户名校验的效果，下边红色部门是我们需要研究对象，所以其他的部门可以忽略不看。
内容如下：
<title>用户注册</title> <div class="regist"> <div class="regist_center"> <div class="regist_top"> <div class="left fl">会员注册</div><div class="right fr">小米商城</div><div class="clear"></div><div class="xian center"></div></div><div class="regist_main center"> //第一步：首先，我们创建一个用户名input输入框，并添加一个onblur="checkUsername()"事件 <div class="username">用 户 名: <span id="span"></span></div><div class="username">密 码: </div><div class="username">确认 密码: </div><div class="username">邮 箱 号: </div><div class="username">姓 名: </div><div class="username">手 机 号: </div><div class="username">地 址: </div><div class="username"> <div class="left fl">验 证 码: </div><div class="right fl"></div><div class="clear"></div></div></div><div class="regist_submit"> </div></div></div>
第二种方式：使用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 = u<div style="color:transparent">来源gaodai.ma#com搞#代!码网</div>serService.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("<font color='green'>用户名可以使用</font>"); } return NONE;//此处返回空 }
效果如下：
以上这篇ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)
转载请注明原文链接：ajax实现用户名校验的传统和jquery的$.post方式(实例讲解)
