jQuery+Ajax实现用户名重名实时检测

利用jQuery框架，封装了底层的Ajax异步技术，通过简单的方法调用即可实现。这篇博客是针对用户注册时出现的用户名重名问题的自动检测，利用的技术是Ajax异步传输。

register.jsp 注册显示页面

rush:xhtml;"> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

用户名：

男 女

<script type="text/javascript">
// 检查表单元素的值是否为空
function check() {
var myform = document.getElementById("myform");
for ( var i = 0; i < myform.length; i++) {
if (myform.elements[i].value == "") {
alert(myform.elements[i].title + "不能为空");
myform.elements[i].focus();
return;
}
}
myform.submit(); // 表单中最后input提交标签用的是button类型，首先不提交表单，在js判断表单项都不为空时 再提交表单。
}

$(function(){
$(":input[name='name']").blur(function(){
var val = $(this).val();
val = $.trim(val);

if(val != ""){
var url = "${pageContext.request.contextpath }/UserServlet"; // 将前端的业务转到后端Servlet来处理。最后Servlet再将结果返回给前端JSP页面
var args = {"userName":val,"time":new Date()};

$.post(url,args,function(data){ // URL中处理的结果都保存在data数据中，而data中的格式是Servlet中返回的结果格式，即为html
 $("#message").html(data);  //将data结果附加到div中
});

}
});
});

UserServlet 逻辑处理Servlet类，用于对用户重名的判断以及响应处理结果的输出等。其中用于数据库检测重名的方法省略了(LoginDao.getInstance().checkUserName(userName.trim()); // 查找数据库是否存在该用户名)

rush:java;"> package com.servlet.user;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.dao.LoginDao;
import com.user.UserInfo;

public class UserServlet extends HttpServlet {

public void doPost(HttpServletRequest request,HttpServletResponse response)
throws servletexception,IOException {

response.setContentType("text/html; charset=UTF-8"); // 设置响应结果的格式为text/html，字符集为UTF-8
response.setCharacterEncoding("UTF-8"); // 设置响应结果的字符编码为UTF-8
// 禁止缓存
response.setHeader("Cache-Control","no-store,no-cache,must-revalidate");
response.setHeader("Cache-Control","post-check=0,pre-check=0");
response.setDateHeader("Expires",0);
response.setHeader("Pragma","no-cache");

PrintWriter out = response.getWriter();
out.println("<?xml version=\"1.0\" encoding=\"utf-8\"?>");
// 从httpRequest()方法中获得请求参数值
// 通过httpRequest()方法封装的请求参数被编码为UTF-8格式，此处若想还原原来的编码格式，则需要通过UTF-8格式解码

String userName = request.getParameter("userName");
String result = null;
boolean check = LoginDao.getInstance().checkUserName(userName.trim()); // 查找数据库是否存在该用户名
if (check) {
result = "该用户已经被使用";
} else {
result = "该用户名可以使用";
}
response.getWriter().print(result); // 将结果输出到response响应流中
}

@Override
protected void doGet(HttpServletRequest req,HttpServletResponse resp)
throws servletexception,IOException {
this.doPost(req,resp);
}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：使用原生js写ajax实例(推荐)下一篇：jquery请求servlet实现ajax异步请求