使用Ajax、Json异步判断用户名是否存在

最新推荐文章于 2023-05-07 16:04:19 发布

兴奋の大公猴

最新推荐文章于 2023-05-07 16:04:19 发布

阅读量1.1k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46274901/article/details/123669733

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

需求分析

当用户的鼠标焦点离开了用户名的输入框使，判断用户名是否存在，如果存在则告诉用户该用户名已存在，如果不存在则告诉用户该用户名可用
将用户输入的username通过ajax发送给后台，后台接收username调用数据库查询，并判断其是否存在，再返回json字符串给客户端。

在这里插入图片描述

代码实现

注册页面的代码

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

<script>

    //在页面加载完成后
    $(function (){
        //给username绑定失去焦点事件
        $("#username").blur(function (){
           //获取username文本输入的值
            var username = $(this).val();
            //发送ajax请求
            $.get("findUserServlet",{username:username},function (data){
                var span = $("#s_username");
                //判断userExist键的值是否为true
                if(data.userExist){
                    //用户名存在
                    span.css("color","red");
                    span.html(data.msg);
                }else {
                    //用户名不存在
                    span.css("color","green");
                    span.html(data.msg);
                }

            },"json");
        });
    });
</script>
<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 com.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.service.Impl.UserServiceImpl;
import com.service.UserService;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

@WebServlet(name = "findUserServlet", value = "/findUserServlet")
public class findUserServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        //1.获取用户名
        String username = request.getParameter("username");

        Map<String,Object> map = new HashMap<>();
        //2.调用service层判断是否存在
        UserService service = new UserServiceImpl();
        boolean flag = service.userExist(username);
        if(flag){
            //存在
            map.put("userExist",true);
            map.put("msg","用户名太受欢迎，换一个吧！");
        }else {
            //不存在
            map.put("userExist",false);
            map.put("msg","用户名可用");
        }

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



    }

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