实现简单的用户名校验，是否存在（ajax）

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

baby的我

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

阅读量518

点赞数 1

分类专栏：学习记录文章标签：校验用户名

本文链接：https://blog.csdn.net/qq_41431457/article/details/103230688

版权

学习记录专栏收录该内容

15 篇文章 3 订阅

订阅专栏

实现百度注册框的用户名校验功能：

在输入框内输入一个用户名，如果此用户名存在，则红色显示一段文字，否则绿色显示

用的是Jquery和jackson

目录结构：

前端index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function ()
        {
            //鼠标点击输入框外时触发
            $("#username").blur(function ()
            {
                //获取输入内容
                var username = $(this).val();

                //发送ajax，请求servlet 返回数据data
                $.get("findUserServlet",{username:username},function (data)
                {
                    //"userExist": true, "msg": "此用户名太受欢迎，请换一个"
                    //"userExist": false, "msg": "此用户可用"
                    var span = $("#s_username");
                    span.html(data.msg);

                    //如果用户名存在
                    if (data.userExist)
                        span.css("color","red");
                    else
                        span.css("color","green");

                },"json");
            });

        });

    </script>
</head>


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

后端servlet：

假设暂时tom已存在

package servlet;

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;

@WebServlet(name = "/findUserServlet" ,urlPatterns="/findUserServlet")
public class FindUserServlet extends HttpServlet
{
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        response.setContentType("text/html;charset=utf-8");
        String username = request.getParameter("username");

        //"userExist": true, "msg": "此用户名太受欢迎，请换一个"
        //"userExist": false, "msg": "此用户可用"
        Map<String , Object> map = new HashMap<String , Object>();
        if("tom".equals(username))
        {
            map.put("userExist",true);
            map.put("msg","此用户名太受欢迎，请换一个");
        }
        else
        {
            map.put("userExist",false);
            map.put("msg","此用户可用");
        }

        ObjectMapper mapper = new ObjectMapper();

        String string = mapper.writeValueAsString(map);
        response.getWriter().write(string);

    }

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