使用Ajax与后端Servlet进行数据交互

1.首先需要在你的项目中导入jsonObject需要的6个包，需要的包如下图：

这里我会把包挂在这个链接jar包下载可以去下载。
2.

public class UserLoginServlet extends HttpServlet {
    private UserService userService = new UserServiceImpl();
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Access-Control-Allow-Origin", "*");
        /* 星号表示所有的异域请求都可以接受， */
        response.setHeader("Access-Control-Allow-Methods", "GET,POST");
        /** 设置响应头允许ajax跨域访问 **/
        PrintWriter writer = response.getWriter();
        JSONObject json= JsonReader.receivePost(request);
        User user = (User)JSONObject.toBean(json,User.class);
        JSONObject jsonObject = new JSONObject();
        List<User> users = userService.userLogin(user);
        User user1 = users.get(0);
        if (users.size() == 1 && user1.getPassword().equals(user.getPassword()) && user1.getUsername().equals(user.getUsername())){
            jsonObject.put("status", "200");
        } else {
            jsonObject.put("status","404");
        }
        writer.print(jsonObject.toString());
        writer.flush();
    }

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

笔者在此强调一下，这里的字符流写出的时候要使用PrintWriter，不要使用Writer，否则前台调用的Ajax的回调数据会是你提交的数据。

public class JsonReader {
    public static JSONObject receivePost(HttpServletRequest request) throws IOException, UnsupportedEncodingException {
    // 读取请求内容
        BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream(),"utf-8"));
        String line = null;
        StringBuilder sb = new StringBuilder();
        while ((line = br.readLine()) != null) {
            sb.append(line);
        }
        String json1 = sb.toString();
        //将json字符串转换为json对象
        JSONObject json= JSONObject.fromObject(json1);
        return json;
    }
}

<script>
    layui.use(['layer', 'form'], function () {
        layer = layui.layer;
        form = layui.form;
    });
    function subMit() {
        var username = $('#username').val();
        var password = $('#password').val();
        var json = {username:username,password:password};
        $.ajax({
            type: 'post',
            url: '/BookStore/userLoginServlet',
            datatype: 'json',
            data: JSON.stringify(json),
            success: function (data) {
                var dataStatus = JSON.parse(data);
                console.log(dataStatus)
                if (dataStatus.status == 200) {
                    layer.msg("登录成功！");
                } else {
                    layer.msg("登录失败！");
                }
            }
        });
    }
</script>

这里在做下详细说明，传递过来的数据是 这样的 {“status”:“200”} 这里的键是个字符串，因此要使用的话需要做下转换 var dataStatus = JSON.parse(data);