JQuery封装的ajax

1. 注意：

首先要导jq的包
json对象可以用**.** 来调用key
java只能给前端传页面，或者打印的内容
String jsonstr = json.toJSONString(resultJSON); //将对象转为JSON对象

Json格式和参数解释：

复制代码

<script src="js/jquery-1.10.2.min.js"></script>  //导包
$(function (){

        $("button").click(function (){
            $.ajax({
                url:"/indexServlet",//请求路径servlet，如果一直拼会麻烦（即使是post也可以拼）
                type:"get",//默认是get
                async:"true",//布尔值，请求是否异步处理，默认异步，false是同步
                data:{uname:"123",upwd:"123"},//请求数据
                dataType:"json",//返回值类型
                success:function (res) {
                    $("h1").text(res.msg);
                    msg1=res.msg;
                } ,error: function (code, msg) {
                // 请求失败后的回调函数
                console.log("Error Code: " + code);   // 输出错误代码
                console.log("Error Message: " + msg); // 输出错误信息
                    
            }
            });
        });
    });

1.实现前端与java通信：

使用get，通过？把参数传递到后端，后端用getParameter接收

这里的res是返回值，通过out.println(msg);把参数传递给json

后端：通过 PrintWriter 将消息发送到前端。

复制代码

<body>
<h1>未登录</h1>
<button>ajax</button>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
    $(function (){
        $("button").click(function (){
            $.ajax({
                url:"/indexServlet?name=111",//请求路径servlet
                type:"get",
                success:function (res) {
                    $("h1").text(res);
                }
            })

        });
    });
</script>
</body>

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setCharacterEncoding("utf-8");
        String name = req.getParameter("name");
        System.out.println(name);
        
        String msg="登陆成功";
        PrintWriter out = resp.getWriter();
        out.println(msg);

    }

2.ajax是异步的

这里的alert弹出的值是空白的

这里的1和2是同时进行的，这种就叫异步

所以当alert（msg）时，ajax还没有返回值，所以就导致弹出的是空白

复制代码

<h1>未登录</h1>
<button>ajax</button>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
    $(function (){
        var msg="";
        $("button").click(function (){
            $.ajax({
                url:"/indexServlet?name=111",//请求路径servlet
                type:"get",
                success:function (res) {
                    $("h1").text(res);
                    msg=res;
                }
            })

        });
        alert(msg);
    });
</script>

3.将String转为json

像这样使用String j = "{\"code\":200,\"msg\":\"张三\"}";来传递json对象，太麻烦了，所以下面有阿里巴巴的包可以简单一些

dataType:"json",//返回值类型

复制代码

 PrintWriter out = resp.getWriter();
        String id = req.getParameter("id");
        String pwd = req.getParameter("pwd");

        System.out.println(id+pwd);
        if (id.equals("123")&&pwd.equals("123")){
            String j = "{\"code\":200,\"msg\":\"张三\"}";
            out.println(j);
        }else {
            out.println("登陆失败");
        }

但是这样是String类型的，我们需要转成json类型的

需要使用fastjson-1.2.13.jar这个包，导到lib里面

就像这样使用JSONObject来将字符串转为json对象传出去

复制代码

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setCharacterEncoding("utf-8");

        resp.setContentType("application/json");  // 设置返回类型为 JSON
        PrintWriter out = resp.getWriter();
        String uname = req.getParameter("uname");
        String upwd = req.getParameter("upwd");

        JSONObject jsonObject = new JSONObject();//{}

        System.out.println("===="+uname+upwd);
        if (uname.equals("123")&&upwd.equals("123")){
            jsonObject.put("code",200);//{code:200}
            jsonObject.put("msg","登陆成功");//{code:200,msg:"登陆成功"}

        }else {
            jsonObject.put("code",400);
            jsonObject.put("msg","登陆失败");//{code:200,msg:"登陆失败"}
        }
        out.println(jsonObject);
    }
}

然后前端可以通过.来调用json对象的值

就像res.msg;

复制代码

 $(function (){
        $("button").click(function (){
            $.ajax({
                url:"/indexServlet",//请求路径servlet，如果一直拼会麻烦（即使是post也可以拼）
                type:"get",
                async:"false",//表示请求是否异步处理，默认异步，false是同步
                data:{uname:"123",upwd:"123"},
                dataType:"json",//返回值类型
                success:function (res) {
                    $("h1").text(res.msg);

    
                }
            });
        });
    });

3.2.返回json数组

使用JSONArray jsonArray = new JSONArray();//[{},{},{}]

复制代码

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setCharacterEncoding("utf-8");

        resp.setContentType("application/json");  // 设置返回类型为 JSON

        PrintWriter out = resp.getWriter();
        String uname = req.getParameter("uname");
        String upwd = req.getParameter("upwd");

        JSONObject jsonObject = new JSONObject();//{}

        JSONArray jsonArray = new JSONArray();//[{},{},{}]
        System.out.println("===="+uname+upwd);
        if (uname.equals("123")&&upwd.equals("123")){
            jsonObject.put("code",200);//{code:200}
            jsonObject.put("msg","登陆成功");//{code:200,msg:"登陆成功"}

        }else {
            jsonObject.put("code",400);
            jsonObject.put("msg","登陆失败");//{code:200,msg:"登陆失败"}
        }
        jsonArray.add(jsonObject);
        out.println(jsonArray);


    }

4.ResultJSON来统一格式化结果

它的目的是将服务器处理后的结果（如状态码、消息和数据）结构化并统一格式化为 JSON 形式，以便客户端（如前端 JavaScript）能够轻松地解析和处理这些数据。

（记得带上get set toString）

复制代码

public class ResultJSON {
    private int code;    // 状态码，通常 200 表示成功，其他表示失败或错误
    private String msg;   // 响应消息
    private Object data;  // 可能包含的附加数据（可以是任意类型）

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       resp.setCharacterEncoding("utf-8");

        resp.setContentType("application/json");  // 设置返回类型为 JSON

        PrintWriter out = resp.getWriter();
        String uname = req.getParameter("uname");
        String upwd = req.getParameter("upwd");
        ResultJSON resultJSON = null;//这是我们自定义封装的类，目的是统一json对象
        System.out.println("===="+uname+upwd);
        if (uname.equals("123")&&upwd.equals("123")){
            resultJSON = new ResultJSON(200,"登陆成功");
        }else {
            resultJSON = new ResultJSON(400,"登陆失败");
        }
        
        JSONObject json = new JSONObject();//{}
        String jsonstr = json.toJSONString(resultJSON); //将对象转为JSON对象
        out.println(jsonstr);

    }

4.1如果到时有传对象：

复制代码

    public ResultJSON getUserList() {
        // 假设我们从数据库查询到了一些用户数据
        List<User> users = new ArrayList<>();
        users.add(new User("john_doe", "john.doe@example.com"));
        users.add(new User("jane_doe", "jane.doe@example.com"));

        // 使用 ResultJSON 封装结果
        return new ResultJSON(200, "查询成功", users);
    }