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);
    }
相关推荐
明月_清风8 小时前
Muse 登顶 App Store 第一,SDK 直接开源:AI Agent 开始进入下一个阶段
人工智能·后端
leikooo8 小时前
用餐厅和盘子理解栈和堆
java·数据结构·链表·rust
Ivanqhz9 小时前
激活函数在 Transformer 中的作用及各种变体简述
java·linux·数据库·人工智能·深度学习
沙漠之主10 小时前
C++编程教学设计资料:从入门到实战的完整课程方案
java·前端·c++
FPGA小徐10 小时前
PA1 基础设施(2)深度解析:NEMU 中 ITRACE、MTRACE、FTRACE、IRINGBUF、ETRACE、DIFFTEST 全解析
java·服务器·网络
YOLO数据集集合10 小时前
EvoAgent:面向PR研发治理的自进化Multi-Agent Harness系统
java·开发语言·目标检测·agent·自进化
hsfxuebao10 小时前
Loop Engineering 保姆级教程 + 项目实战
人工智能·后端
知行EDI11 小时前
知行之桥 MaBang 端口使用指南——Create Order 订单创建篇
java·服务器·数据库
笑鸿的学习笔记11 小时前
C++笔记之大块顺序写
java·c++·笔记
打工仔折腾 AI11 小时前
从 Demo 到生产级 Agent:8 个关键设计机制与 Python 实现拆解
java·jvm·人工智能·后端·python·langchain·ai agent 实战