JavaWeb简单校验用户名是否符合要求/使用JSON&AJAX

Dear 丶 2023-09-23 16:38 62阅读 0赞

> JavaWeb黑马B站网课的案例笔记

### 文章目录 ###

*  效果展示
 *  代码
 *  重点注意内容
 *   *  1、不设置数据传递类型会出现错误，因为默认是传递的字符串
     *  2、解决中文乱码问题

本案例为简答的JSON与后端数据进行交互，但是没有用到数据库，用户名为Servlet中固定写死的一个值

# 效果展示 #

下面为运行结果和查看数据的传递  
![在这里插入图片描述][ad6529e2f69e47c0969541b84f0d0449.png]  
![在这里插入图片描述][b4e8f72e5d0c4278881e6028578ff440.png]  
![在这里插入图片描述][a4f4e8654c0345a9845601010f3b7662.png]

# 代码 #

注意：要引入JQuery文件，在html中使用了AJAX异步请求，使用了JQuery的实现AJAX  
![在这里插入图片描述][04c85e2c71fc448c8e20471f64915940.png]  
**register.html**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <script src="js/jquery-3.3.1.min.js"></script>
    
    
        <script>
            //在页面加载完成后
            $(function () {
        
               //给username绑定blur事件
               $("#username").blur(function () {
        
                   //获取username文本输入框的值
                   var username = $(this).val();
                   //发送ajax请求
                   //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
                   //                         {"userExsit":false,"msg":"用户名可用"}
                   $.get("findUserServlet",{
        username:username},function (data) {
        
                       //判断userExsit键的值是否是true
    
                       // alert(data);
                       var span = $("#s_username");
                       if(data.userExsit){
        
                           //用户名存在
                           span.css("color","red");
                           span.html(data.msg);
                       }else{
        
                           //用户名不存在
                           span.css("color","green");
                           span.html(data.msg);
                       }
                   });
    
               }); 
            });
    
        </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.java**  
1、判断用户名是否为tom

@WebServlet("/findUserServlet")
    public class FindUserServlet extends HttpServlet {
        
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
            //1.获取用户名
            String username = request.getParameter("username");
    
            //2.调用service层判断用户名是否存在
    
            //期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
            //                         {"userExsit":false,"msg":"用户名可用"}
    
            //设置响应的数据格式为json
            response.setContentType("application/json;charset=utf-8");
            Map<String,Object> map = new HashMap<String,Object>();
    
            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);
        }
    }

# 重点注意内容 #

## 1、不设置数据传递类型会出现错误，因为默认是传递的字符串 ##

**服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：**  
方法一：发送数据时，设置类型为JSON  
$.get(type):将最后一个参数type指定为"json"  
![在这里插入图片描述][c1cb6bdd8a434e1fa0e0ebdd58e1b7f6.png]  
方法二：或者接受数据时设置为JSON  
在服务器端设置MIME类型  
response.setContentType(“application/json;charset=utf-8”);  
![在这里插入图片描述][5a02fec79f6a4a309b4565c7d3d1938c.png]

## 2、解决中文乱码问题 ##

response.setContentType(“charset=utf-8”);

[ad6529e2f69e47c0969541b84f0d0449.png]: https://img-blog.csdnimg.cn/ad6529e2f69e47c0969541b84f0d0449.png
[b4e8f72e5d0c4278881e6028578ff440.png]: https://img-blog.csdnimg.cn/b4e8f72e5d0c4278881e6028578ff440.png
[a4f4e8654c0345a9845601010f3b7662.png]: https://img-blog.csdnimg.cn/a4f4e8654c0345a9845601010f3b7662.png
[04c85e2c71fc448c8e20471f64915940.png]: https://img-blog.csdnimg.cn/04c85e2c71fc448c8e20471f64915940.png
[c1cb6bdd8a434e1fa0e0ebdd58e1b7f6.png]: https://img-blog.csdnimg.cn/c1cb6bdd8a434e1fa0e0ebdd58e1b7f6.png
[5a02fec79f6a4a309b4565c7d3d1938c.png]: https://img-blog.csdnimg.cn/5a02fec79f6a4a309b4565c7d3d1938c.png