ajax+json校验用户名是否存在-阿里云开发者社区

ajax+json校验用户名是否存在

2023-06-19 61

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ajax+json校验用户名是否存在

需求：实现用户名校验，如下图所示，当用户名在数据库中存在就提示注册过了，请换一个，没有的话，提示用户名可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //给username绑定blur事件
    $(function () {
        $("#username").blur(function () {
            //获得输入的值
            var username = $(this).val();
            //异步获取服务器中的值
            //这中间传的数据是json数据{"userExsit":true}
            //不要忘记在客户端使用时，要想当做json数据格式使用
            $.post("findUserservlet",{username:username},function (data) {
                if (data.userExsit){
                    //显示注册过了，显示红色
                    $("#S_username").css("color","red");
                    $("#S_username").html("注册过了,请换一个");
                }
                else{
                    //显示绿色，
                    $("#S_username").css("color","green");
                    $("#S_username").html("用户名可用");
                }
            },"json")
        })
    })
</script>
<body>
<form>
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="S_username"></span>
    <br>
    <input type="text" id="password" name="password" placeholder="请输入密码"> <br>
    <input type="submit" value="注册">
</form>
</body>
</html>

findUserServlet.java代码如下：

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("/findUserservlet")
public class findUserservlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码
        resp.setContentType("text/html;charset=utf-8");
        //获得参数
        String username = req.getParameter("username");
        //创建map封装对象
        Map<String,Object> map=new HashMap<String,Object>();
        if(username.equals("tom")){
            map.put("userExsit",true);
        }
        else {
            map.put("userExsit",false);
        }
        //将map转换成json对象,传给客户端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(resp.getWriter(),map);
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }
}