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

系统管理员 2023-10-10 11:21 27阅读 0赞

#### 文章目录 ####

*   *   *  JFinal接收前端json格式参数+浏览器数据传输格式
         *   *  1、Request请求传输数据的三种格式
             *   *  ①Query String Parameters格式
                 *  ②Form Data格式
                 *  ③Request Payload格式
             *  2、前端传JSON对象
             *   *  错误示范！！！
             *  3、后端接收json格式参数
             *  总结
             *  参考连接

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

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

***不想看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参数格式进行显示：  
![在这里插入图片描述][20200718132117356.PNG]  
他的请求参数是这样的：  
![在这里插入图片描述][20200718132132583.PNG]  
使用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请求，参数不会在浏览器上进行显示：  
![在这里插入图片描述][20200718132154722.PNG]  
而且请求的格式也会变成Form Data的方式：  
![在这里插入图片描述][20200718132211258.PNG]  
前端代码是这样的：

$("#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请求方式，这样的参数格式又有所不同：  
![在这里插入图片描述][20200718132239167.PNG]  
**在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格式拼接的数据了，格式如下图所示：  
![在这里插入图片描述][20200718132305929.PNG]  
是不是和上面的参数格式不一样了？

###### 错误示范！！！ ######

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

上前端传输数据的代码：

$("#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参数。  
![在这里插入图片描述][20200718132357234.PNG]  
这么用的话可以很方便接收到参数。

上才艺！

//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"));
    }

控制台输出数据：  
![在这里插入图片描述][20200718132422893.PNG]

##### 总结 #####

上面废话这么多总结起来就两点：

①前端的数据**一定要是json对象**而不能是URL格式的字符串。

②后台使用getRawData()获取json参数后通过fastjson转换成json对象，然后通过json再去获取里面的值。

有兴趣的人可以把接收参数和取值做一下封装以及取值时数据类型的转换。

##### 参考连接 #####

[https://www.cnblogs.com/tugenhua0707/p/8975615.html][https_www.cnblogs.com_tugenhua0707_p_8975615.html]

[https://blog.csdn.net/c\_liufeng/article/details/89228115][https_blog.csdn.net_c_liufeng_article_details_89228115]

[https://blog.csdn.net/m0\_38071468/article/details/80886627][https_blog.csdn.net_m0_38071468_article_details_80886627]

[2020071813204622.PNG]: https://img-blog.csdnimg.cn/2020071813204622.PNG
[20200718132117356.PNG]: https://img-blog.csdnimg.cn/20200718132117356.PNG
[20200718132132583.PNG]: https://img-blog.csdnimg.cn/20200718132132583.PNG
[20200718132154722.PNG]: https://img-blog.csdnimg.cn/20200718132154722.PNG
[20200718132211258.PNG]: https://img-blog.csdnimg.cn/20200718132211258.PNG
[20200718132239167.PNG]: https://img-blog.csdnimg.cn/20200718132239167.PNG
[20200718132305929.PNG]: https://img-blog.csdnimg.cn/20200718132305929.PNG
[20200718132325894.PNG]: https://img-blog.csdnimg.cn/20200718132325894.PNG
[20200718132357234.PNG]: https://img-blog.csdnimg.cn/20200718132357234.PNG
[20200718132422893.PNG]: https://img-blog.csdnimg.cn/20200718132422893.PNG
[https_www.cnblogs.com_tugenhua0707_p_8975615.html]: https://www.cnblogs.com/tugenhua0707/p/8975615.html
[https_blog.csdn.net_c_liufeng_article_details_89228115]: https://blog.csdn.net/c_liufeng/article/details/89228115
[https_blog.csdn.net_m0_38071468_article_details_80886627]: https://blog.csdn.net/m0_38071468/article/details/80886627