Ajax + JSON动态验证用户名是否存在

最新推荐文章于 2020-11-15 15:37:38 发布

暮光乐鱼

最新推荐文章于 2020-11-15 15:37:38 发布

阅读量360

点赞数

分类专栏： java-web 文章标签： java-web-ajax-json

本文链接：https://blog.csdn.net/LSGBB/article/details/102551429

版权

java-web 专栏收录该内容

32 篇文章 2 订阅

订阅专栏

校验用户名是否存在案例

需求：在注册页面，用户输入用户名后，页面可以自动的反馈该用户名是否可用
分析：首先需要编写一个注册页面registe.html；
然后为用户名输入框添加失去焦点事件；
焦点事件中将用户名信息以异步Ajax方式发送给服务器

注意：
Ajax方式默认接收的数据是text类型的数据，并没有将其当作json类型数据来处理

解决方案

在Ajax发送数据方法中，添加接收到请求的数据类型设置；即
$.get()方法中设置type为 "json"
* 语法：$.get(url, [data], [callback], [type])
* url :请求路径
* data :请求参数
* callback :响应成功后的回调函数
* type :返回内容的格式
服务器端设置响应数据类型为 application/json
即设置，response.setContentType("application/json;charset=utf-8");

服务器端主要代码

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 设置请求编码
        request.setCharacterEncoding("utf-8");
        //设置响应编码
//        response.setContentType("text/html;charset=utf-8");
        response.setContentType("application/json;charset=utf-8");
        // 创建Map集合用来存储响应参数
        Map<String,Object> map = new HashMap<String, Object>();
        // 获取请求参数username
        String username = request.getParameter("username");

        // 判断用户名是否存在
        if("张三".equals(username)){
            //用户已存在
            map.put("userExit",true);
            map.put("msg","此用户名已存在，请更换一个");
        }else {
            // 用户名可用
            map.put("userExit",false);
            map.put("msg","用户名可以使用");
        }

        // 将map转为json
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(),map);
    }

jsp页面主要代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    
        <script>
    
            $(function () {
                //为用户名框添加失去焦点事件
               $("input[type='text']").blur(function () {
                   // 获取输入的用户名
                   var username = $(this).val();
    
                   //以Ajax方式发送用户名信息给服务器
                   // 希望接收到的响应消息格式
                   // {"userExit":true,"msg":"此用户名已存在，请更换一个"}
                   // {"userExit":false,"msg":"用户名可以使用"}
                   $.get("reServlet",{username:username},function (data) {
                      //响应成功后的回调函数
                       if (data.userExit){
                           // 用户名已存在
                           $("#span").css("color","red");
                           $("#span").html(data.msg);
                       }else{
                           // 用户名可用
                           $("#span").css("color","green");
                           $("#span").html(data.msg);
                       }
                   },"json");
               });
            });
        </script>
    </head>
    <body>
        <input type="text" name="username" placeholder="请输入用户名">
        <span id="span"></span><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="button" value="注册"><br>
    </body>
    </html>