案例：校验用户名是否存在（jq+ajax+json）

最新推荐文章于 2022-03-25 20:52:13 发布

Mike-H

最新推荐文章于 2022-03-25 20:52:13 发布

阅读量270

点赞数

分类专栏： java_web

本文链接：https://blog.csdn.net/QLBFA/article/details/110672495

版权

java_web 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

校验用户名是否存在
服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：

$.get(type):将最后一个参数type指定为"json"
在服务器端设置MIME类型（在servlet中写，不用在$.get写json了，自动的）

上面两种方法都可以用

用到的类：
在这里插入图片描述

regist.html写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册验证</title>
    <!--导入jq-->
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //在页面加载完成后,jq
        $(function () {
            //给username绑定blur事件
            $("#username").blur(function () {
                //获取username文本输入框的值
                var username = $(this).val();
                //发送ajax请求
                //(假设servlet就发送这个格式来)期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                //                         {"userExsit":false,"msg":"用户名可用"}

                //使用ajax,findUserServlet为servlet路径,第一个是传给servlet的参数名
                $.get("findUserServlet",{username:username},function (data) {
                    //判断userExsit键的值是否是true
                    var span = $("#s_username");

                    //data是json对象，对象.键：data.userExist获取值的，userExist(自定义的)是servlet响应的键
                    if(data.userExsit){
                        //用户名存在
                        span.css("color","red");
                        span.html(data.msg);
                    }else {
                        //用户名不存在
                        span.css("color","green");
                        span.html(data.msg);
                    }
                }/*,"json"*/);
            });
        });

    </script>
</head>
<body>

<form>

    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="s_username"></span>
    <br>
    <input type="password" name="password" placeholder="请输入密码"><br>
    <input type="submit" value="注册"><br>

</form>

</body>
</html>

FindUserServlet 写：

package cn.itcast.web.ajax;

import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * @author QLBF
 * @version 1.0
 * @date 2020/12/4 20:39
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //设置响应的数据格式为json
        //response.setContentType("text/html;charset=utf-8");//要在$.get搭配json使用
        response.setContentType("application/json;charset=utf-8");//不用在$.get写

        //1.获取用户名
        String username = request.getParameter("username");

        //2.调用service层判断用户名是否存在，这里没用数据库（所以没用M层），简单模拟tom而已

        //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
        //                         {"userExsit":false,"msg":"用户名可用"}


        Map<String,Object> map=new HashMap<>();

        if ("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用户名太受欢迎,请更换一个");
        }else {
            //不存在
            map.put("userExsit",false);
            map.put("msg","用户名可用");
        }

        //将map转为json，并且传递给客户端
        //将map转为json
        ObjectMapper mapper=new ObjectMapper();
        //并且传递给客户端
        mapper.writeValue(response.getWriter(),map);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

这里tomcat虚拟目录是/
在这里插入图片描述

Mike-H

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
案例：校验用户名是否存在（jq+ajax+json）

校验用户名是否存在服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：$.get(type):将最后一个参数type指定为"json"在服务器端设置MIME类型（在servlet中写，不用在$.get写json了，自动的）上面两种方法都可以用用到的类：regist.html写：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录