5.验证用户名是否已经被注册：AJAXC请求

时间：2023-01-06 14:42:59

首先在 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>

regist.jsp

相关文章