Ajax和Json的案例（异步校验用户是否存在）

最新推荐文章于 2022-12-15 22:37:53 发布

深耕Java

最新推荐文章于 2022-12-15 22:37:53 发布

阅读量127

点赞数

分类专栏： JavaEE Java案例及分析文章标签： ajax json

本文链接：https://blog.csdn.net/qq_44905731/article/details/115323963

版权

JavaEE 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

Java案例及分析

33 篇文章 0 订阅

订阅专栏

Ajax和Json的案例

校验用户是否存在：
    服务器响应的数据，在客户端使用时候，json数据格式
        使用需要指定：
            1.前端的ajax中添加 type: "json"
            2.后端指定MIME类型 response.setContentType("application/json;charset=utf-8");
    分析：
        当文本输入框失去焦点后，发送ajax请求，查询数据库是否存在该用户名
            如果存在：提示信息不可用
            如果不存在：提示信息可用

前端页面：

<!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 usernameVal = $(this).val();
                // 发送ajax请求
                $.get("findUserServlet",
                    {username: usernameVal},
                    // 期望返回的数据格式{"userExsit":true,"msg":用户已存在}
                    // {"userExsit":false,"msg":用户可注册}
                    function (data) {
                        var span = $("#s-username");
                        // 判断userExsit是否是true
                        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 action="">
    <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="注册">
</form>
</body>
</html>

后端Servlet：

package cn.itcast.web.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("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取用户名
        String username = request.getParameter("username");
        // 调用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,传递到前端
        ObjectMapper mapper = new ObjectMapper();
        mapper.writeValue(response.getWriter(), map);
    }

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