JFinal接收前端json格式参数+浏览器数据传输格式

最新推荐文章于 2025-02-28 15:58:29 发布

小白说(๑• . •๑)

最新推荐文章于 2025-02-28 15:58:29 发布

阅读量3.4k

点赞数 1

分类专栏： # JFinal 文章标签： ajax java js

本文链接：https://blog.youkuaiyun.com/dongzi_yu/article/details/107427552

版权

JFinal 专栏收录该内容

3 篇文章

订阅专栏

文章目录

- - JFinal接收前端json格式参数+浏览器数据传输格式

JFinal接收前端json格式参数+浏览器数据传输格式

前一段时间前端说，想要给接口传json格式的数据，因为这样写参数的时候比较方便（因为传的参数真的很多，一个个拼接也很麻烦），不需要再去拼接参数成标准的URL格式了。最终传递数据的要求如下图所示：
在这里插入图片描述

不想看1的可以直接跳过看2和3。

1、Request请求传输数据的三种格式

这里只说Content-Type数据请求格式中的两种：

Content-Type: application/x-www-form-urlencoded; charset=UTF-8（默认formData方式传输数据）
Content-Type: application/json;charset=UTF-8（传输json格式的数据）

①Query String Parameters格式

在contentType为默认的情况下，如果是GET请求，参数会在浏览器的地址栏上以标准的URL参数格式进行显示：
在这里插入图片描述
他的请求参数是这样的：

使用JFinal框架的时候，可以在后端使用 getPara(“name”) 进行参数的接受，这是没有问题的。

前端的代码是这样的：

$("#btn").on("click", function () {
    $.ajax({
        url: "/hello/testJson2",
        type: "get",   //post
        dataType: "json",
        data: {"id": 66, "name": "yyy", "age": 555},
        success: function (data) {
            alert("返回的数据：" + data)
        },
        //contentType: "application/json;charset=UTF-8"  //数据传输类型，不写就是默认
    });
});

②Form Data格式

在contentType为默认的情况下，如果是POST请求，参数不会在浏览器上进行显示：
在这里插入图片描述
而且请求的格式也会变成Form Data的方式：

前端代码是这样的：

$("#btn").on("click", function () {
    $.ajax({
        url: "/hello/testJson2",
        type: "post",   //get
        dataType: "json",
        data: {"id": 66, "name": "yyy", "age": 555},
        success: function (data) {
            alert("返回的数据：" + data)
        },
        //contentType: "application/json;charset=UTF-8"  //数据传输类型，不写就是默认
    });
});

③Request Payload格式

如果contentType为："application/json;charset=UTF-8"，同样是POST请求方式，这样的参数格式又有所不同：
在这里插入图片描述
在jquery中ajax以post方式提交的数据会默认转换成标准的URL格式，也就是如上图所示。

这样的参数传到后台并不是json格式的参数，不能使用JSONObject去转换，只能自己手写去拆分，这就比较麻烦了。也不能通过getPara()去获取参数。

如果contentType为："application/json;charset=UTF-8",请求方式是GET，参数同样会以Query String Parameters的格式提交，可以见上图。

2、前端传JSON对象

需要注意的是contentType必须指定为"application/json;charset=UTF-8"，并且提交的方式为POST。因为jquery中ajax的data数据是转换成标准URL格式的，所以还需要进一步进行数据处理：

JSON.stringify({“id”: 66, “name”: “yyy”, “age”: 555})

使用 JSON.stringify去转换一下，这样传输的数据才是json格式的数据，不在是Request Payload中以URL格式拼接的数据了，格式如下图所示：
在这里插入图片描述
是不是和上面的参数格式不一样了？

错误示范！！！

如果contentType指定为"application/json;charset=UTF-8"，但是提交的方式为GET方式的话。就会出现错误，因为地址栏上并不能拼接json格式的对象：
在这里插入图片描述
多么明显的错误！！？？

上前端传输数据的代码：

$("#btn8").on("click", function () {
    $.ajax({
        url: "/hello/testJson",
        type: "post",
        dataType: "json",
        data:  JSON.stringify({"id": 66, "name": "yyy", "age": 555}),
        success: function (data) {
            alert("返回的数据：" + data)
        },
        contentType: "application/json;charset=UTF-8"  //数据传输类型
    });
});

3、后端接收json格式参数

在jfinal中提供了一个方法getRawData()专门去接收json/xml参数。
在这里插入图片描述
这么用的话可以很方便接收到参数。

上才艺！

//controller action...
public void testJson() {
    //接收json参数
    JSONObject jsonObject = JSONObject.parseObject(getRawData());
    System.out.println("接收到的数据：" + getRawData());
    System.out.println("获取id：" + jsonObject.getString("id"));
    renderJson("返回的数据：" + jsonObject.getString("id"));
}