首先在 web.xml 文件中添加配置信息
<!-- 配置全局的字符集 --> <context-param> <param-name>encode</param-name> <param-value>utf-8</param-value> </context-param>
在 regist.jsp 文件中添加 相关逻辑
// 当input失去焦点时马上执行对应的表单验证 // 需要为每个input添加一个失去焦点的事件 // 添加一个文档就绪事件，在事件中为每个input添加对应的方法 $(function(){ // 文档就绪事件，当当前文档家在完成之后，会自动调用 $("input[name='username']").blur(function(){ // 验证用户名是否为空 var flag=formObj.checkNull("username", "用户名不能为空"); if(flag){//说明username输入框不为空 // 发送ajax var url="/AJAXCheckUsernameServlet?username=" + $(this).val(); // load方法是通过一个组件来调用的 // 当ajax请求收到应答后，会将应答的内容自动填充到该组件内部 // $("#msg_username").load(url); //$().load->如果添加了请求参数，则是post请求，如果没有添加，是get请求 //$.get发送的就是get请求 // result是服务器返回给浏览器的应答内容 $.get(url,function(result){ // 将应答内容添加到username对应的span中 $("#msg_username").html(result); }); /* var url2="/AJAXCheckUsernameServlet"; $.post(url2,data,function(result){ //result就是服务器返回的应答内容 // 将应答内容添加到username对应的span中 alert("true"); $("#msg_username").html(result); }); */ } });
编写对应的AJAX请求逻辑
package cn.bingou.web; import java.io.IOException; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import javax.servlet.ServletContext; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import cn.bingou.util.JDBCUtils; public class AJAXCheckUsernameServlet extends HttpServlet { public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取web.xml中配置的字符集 ServletContext sc=this.getServletContext(); String encode=sc.getInitParameter("encode"); // 1.处理乱码问题应答乱码 resp.setContentType("text/html;charset=" + encode); // 2.获取请求参数 String username=req.getParameter("username"); // 处理get请求乱码 byte[] array=username.getBytes("utf-8"); username=new String(array,encode); // 3.查询数据库，看该用户名是否存在 String sql="select * from user where username=?"; Connection conn=null; PreparedStatement ps=null; ResultSet rs=null; try { conn=JDBCUtils.getConnection(); ps=conn.prepareStatement(sql); ps.setString(1, username); rs=ps.executeQuery(); if(rs.next()){ // 用户名存在 resp.getWriter().write("该用户已存在"); } else { resp.getWriter().write("恭喜您，该用户可以使用"); } } catch (Exception e) { e.printStackTrace(); } finally{ JDBCUtils.close(conn, ps, rs); } } public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req, resp); } }
这里出了一个错误
我一开始用的是post验证，代码如下：
var url2="/AJAXCheckUsernameServlet"; $.post(url2,data,function(result){ //result就是服务器返回的应答内容 // 将应答内容添加到username对应的span中 alert("true"); $("#msg_username").html(result); });
但是我的AJAX并没有应答，我也不知道咋回事
于是改成了get请求，代码如下：
var url="/AJAXCheckUsernameServlet?username=" + $(this).val(); $.get(url,function(result){ // 将应答内容添加到username对应的span中 $("#msg_username").html(result); });
但是我的AJAX文件里面的get请求编码一开始设置的是iso8895-1请求时出现错误，改成 utf-8 之后就成功了。
regist.jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML> <html> <head> <title>欢迎注册BinGou</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/regist.css"/> <script type="text/javascript" src="/js/jquery-1.4.2.js"></script> <script type="text/javascript"> var formObj={ "checkForm":function(){ // 1.非空验证 var flag=true;//控制表单提交的变量，默认为true /* flag=this.checkNull("username","用户名不能为空")&&flag; */ flag=this.checkNull("password","密码不能为空")&&flag; flag=this.checkNull("password2","确认密码不能为空")&&flag; flag=this.checkNull("nickname","昵称不能为空")&&flag; flag=this.checkNull("email","邮箱不能为空")&&flag; flag=this.checkNull("valistr","验证码不能为空")&&flag; //2. 两次密码一致验证 flag=this.checkPassword("password","两次密码应该一致") && flag; // 3.邮箱格式验证 flag=this.checkEmail("email","邮箱格式不正确") && flag; return flag; }, "checkemail":function(name,msg){ var email=$("input[name='"+name+"']").val(); // 当邮箱的值不为空串时再进行格式判断 if($.trim(email) != ""){ // 123@163.com.cn var reg=/^w+@w+(.w+)+$/; if(!reg.test(email)){ // 设置错误提示信息 this.setMsg(name, msg); return false; }else{ // 设置清空之前添加的错误信息 this.setMsg(name,""); return true; } } return false; }, "checkPassword":function(name,msg){ var psd1=$("input[name='password']").val(); var psd2=$("input[nmae='password2']").val(); if($.trim(psd1)!=""&&$.trim(psd2)!=""){ if(psd1!=psd2){ // 添加错误提示信息 this.setMsg(name+"2",msg); return false; }else{ // 清空之前添加的错误提示信息 this.setMsg(name+"2",""); return true; } } return false; }, "checkNull":function(name,msg){ // 用来判断input值是否为null的方法 // 拿到对应的input框的值 var value=$("input[name='"+name+"']").val(); // 判断是否为空 if($.trim(value)==""){ // 如果为空，则调用设置消息的方法，将错误信息显示在input的后面 this.setMsg(name,msg); // 表单不应该提交 return false; }else{ // 将之前添加的错误提示信息清空 this.setMsg(name, ""); // 表单可以提交 return true; } }, "setMsg":function(name,msg){ // 获取name指定的input后面的span,然后将传入的错误信息显示在span内部 $("input[name='"+name+"']").nextAll("span").html(msg).css("color","red"); } }; // 当input失去焦点时马上执行对应的表单验证 // 需要为每个input添加一个失去焦点的事件 // 添加一个文档就绪事件，在事件中为每个input添加对应的方法 $(function(){ // 文档就绪事件，当当前文档家在完成之后，会自动调用 $("input[name='username']").blur(function(){ // 验证用户名是否为空 var flag=formObj.checkNull("username", "用户名不能为空"); if(flag){//说明username输入框不为空 // 发送ajax var url="/AJAXCheckUsernameServlet?username=" + $(this).val(); // load方法是通过一个组件来调用的 // 当ajax请求收到应答后，会将应答的内容自动填充到该组件内部 // $("#msg_username").load(url); //$().load->如果添加了请求参数，则是post请求，如果没有添加，是get请求 //$.get发送的就是get请求 // result是服务器返回给浏览器的应答内容 $.get(url,function(result){ // 将应答内容添加到username对应的span中 $("#msg_username").html(result); }); /* var url2="/AJAXCheckUsernameServlet"; $.post(url2,data,function(result){ //result就是服务器返回的应答内容 // 将应答内容添加到username对应的span中 alert("true"); $("#msg_username").html(result); }); */ } }); $("input[name='password']").blur(function(){ formObj.checkNull("password","密码不能为空"); }); $("input[name='password2']").blur(function(){ formObj.checkNull("password2","确认密码不能为空"); formObj.checkPassword("password","两次密码应该一致"); }); $("input[name='nickname']").blur(function(){ formObj.checkNull("nickname","昵称不能为空"); }); $("input[name='email']").blur(function(){ formObj.checkNull("email","邮箱不能为空"); formObj.checkEmail("email","邮箱格式不正确"); }); $("input[name='valistr']").blur(function(){ formObj.checkNull("valistr","验证码不能为空"); }); }); </script> </head> <body> <!-- action：请求的路径 ，method：请求方式 --> <form action="/RegistServlet" method="POST" onSubmit="return formObj.checkForm()" > <h1>欢迎注册BinGou</h1> <table> <tr><!-- 如果出现错误将在表单顶部显示 --> <td colspan="2" style="text-align:center;color:green"> <%=request.getAttribute("errMsg")==null?"":request.getAttribute("errMsg") %> </td> </tr> <tr> <td class="tds">用户名：</td> <td> <!-- 回填 --> <input type="text" name="username" value="<%=request.getParameter("username")==null?"":request.getParameter("username") %>"/> <span id="msg_username"></span> </td> </tr> <tr> <td class="tds">密码：</td> <td> <input type="password" name="password" value="<%=request.getParameter("password")==null?"":request.getParameter("password") %>"/> <span></span> </td> </tr> <tr> <td class="tds">确认密码：</td> <td> <input type="password" name="password2" value="<%=request.getParameter("password2")==null?"":request.getParameter("password2") %>"/> <span></span> </td> </tr> <tr> <td class="tds">昵称：</td> <td> <input type="text" name="nickname" value="<%=request.getParameter("nickname")==null?"":request.getParameter("nickname") %>"/> <span></span> </td> </tr> <tr> <td class="tds">邮箱：</td> <td> <input type="text" name="email" value="<%=request.getParameter("email")==null?"":request.getParameter("email") %>"/> <span></span> </td> </tr> <tr> <td class="tds">验证码：</td> <td> <input type="text" name="valistr"/> <img src="img/regist/yzm.jpg" width="" height="" alt="" /> </td> </tr> <tr> <td class="sub_td" colspan="2" class="tds"> <input type="submit" value="注册用户"/> </td> </tr> </table> </form> </body> </html>