JSON数据交互

Cheryl

在web开发中,前端常通过ajax提交json数据与后台交互
在使用JSON进行数据交互时,需要先导入jackson-databind包(maven会自动导入它的基础包jackson-core核心包和jackson-annotation注解包,并且注解包需要在SpringMVC中添加<mvc:annotation-driven />)
如果不使用<mvc:annotation-driven />则需在SpringMVC.xml中配置json转换器,在处理器适配器中设置

<!--处理器适配器 -->
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
    <property name="messageConverters">
    <list>
    <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
    </list>
    </property>
</bean>

SpringBoot中application.yml配置如下:

spring:
  jackson:
    #日期格式化
    date-format: yyyy-MM-dd HH:mm:ss
    serialization:
      #格式化输出
      indent-output: true
      #忽略无法转换的对象
      fail-on-empty-beans: false
    #设置空如何序列化
    defaultPropertyInclusion: NON_EMPTY
    deserialization:
      #允许对象忽略json中不存在的属性
      fail-on-unknown-properties: false
    parser:
      #允许出现单引号
      allow-single-quotes: true
[SpringBoot整合jackson参考](https://blog.csdn.net/qq_44836294/article/details/107578571?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.edu_weight)
**推荐在实际项目开发中99%(剩下的1%建议放弃)使用JSON对象传数据,因为对数据复杂情况下JSON串使用并不方便**
JSON串不能取属性,强行取属性只会得到undefined
## JSON串传输
**前端**
// 例用ajax提交表单数据
$('#myAjax').on('click',function(){
    $.ajax({
        type:"POST",
        url:"testAjax",
        data:{ 
            shopName:"myShop",
            shopDesc:"myDesc"
        },
        contentType:"application/x-www-form-urlencoded",// 默认类型,可以不写
        dataType:"text",
        success:function(result){
            alert(result);
        },
        error:function(d,m){
            alert(m);
        }
    });
});

**后端**
@RequestMapping(value = "/testAjax", method = RequestMethod.POST)
@ResponseBody
public Object my(Shop shop) {
    System.out.println(shop);
    return shop;
}
- `application/x-www-form-urlencoded`表示以`key1=val1&key2=val2`形式(即标准URL模式)传输数据,JSON对象会在网络传输中自动转换成这种格式(这里`data:`必须是JSON对象不能是JSON串),传输到后台的数据会自动适配成相应实体类(要求属性一一对应),x-www-form-urlencoded也是contentType的默认类型
- `@ResponseBody`表示返回JSON对象
- `dataType:text`表示以JSON.stringify(Object)形式解析返回的JSON对象为JSON串(JSON字符串)

## JSON对象转输
**前端**

$('#myAjax').on('click',function(){

    $.ajax({
        type:"POST",
        url:"testAjax",
        data:JSON.stringify({ shopName:"myShop",shopDesc:"myDesc"}),
        contentType:"application/json",
        dataType:"json",// dataType默认类型为json
        success:function(result){
            alert(JSON.stringify(result));
        },
        error:function(d,m){
            alert(m);
        }
    });
});
**后端**
@RequestMapping(value = "/testAjax", method = RequestMethod.POST,consumes = "application/json")
@ResponseBody
public Shop my(@RequestBody Shop shop) {
    System.out.println(shop);
    return shop;
}
需设置

...
data:JSON.stringify(jsonData),
contentType:"application/json",
...

后端的参数需要注解@RequestBody以绑定实体类
`consumes = "application/json"`指定以JSON对象的方式解析网络传输过程中的JSON串,功能等同于`contentType:"application/json"`
因为已经指定了`dataType:"json"`,所以需JSON.stringify()解析返回JSON对象,或者继续指定后端返回前台数据类型`dataType:"text"`,不然直接输出会得到[Object object]结果
(对于JSON对象,可以用JSON.data访问相应数据)
## JSON对象数组传输
**前端**
$('#myAjax').on('click',function(){
    var shop1 = { shopName:"myShop",shopDesc:"myDesc"}; 
    var shop2 = { shopName:"myShop2",shopDesc:"myDesc2"}; 
    $.ajax({
        type:"POST",
        url:"testAjax",
        data:JSON.stringify([shop1,shop2]),
        contentType:"application/json",
        dataType:"json",
        success:function(result){
            alert(JSON.stringify(result);// 若是用typeof()可知这里是Object
        },
        error:function(d,m){
            alert(m);
        }
    });
});
**后端**
@RequestMapping(value = "/testAjax", method = RequestMethod.POST,consumes = "application/json")
@ResponseBody
public Object my(@RequestBody Shop[] shop) {
    System.out.println(Arrays.toString(shop));
    return shop;
}
基本没什么特别的注意使用`JSON.stringify([shop1,shop2])`将JSON对象数组转为JSON串,在以`contentType:"application/json"`以JSON对象格式传输即可(即标准的{key:value,key2:value2}格式,若是x-www-urlencoded则是key=value&key2=value2格式传输)
## 预备知识
**contentType类型**
contentType表示以何种方式在网络(向后台)上传送数据
|序号|类型|
|---|---|
|1|application/x-www-form-urlencoded(默认)|
|2|multipart/form-data|
|3|application/json|
|4|text/html|
https://www.cnblogs.com/shihaiming/p/10276215.html
**dataType类型**
dataType表示以何种方式解析后端传至前端的数据
|类型|作用|
|---|---|
|json|jquery以JSON.parse()形式解析JSON串(网络传输)为js对象|
|text|显示后台返回的JSON串|
|html|显示后台返回的JSON串|
在http中传输数据时,需遵循TCP/IP协议,规范如下:

<method><request-url><version>
<headers>
<entity-body></entity-body>
</headers>
</version></request-url></method>

阅读 1.1k

Java技术栈 [链接]

13 声望
0 粉丝
0 条评论

Java技术栈 [链接]

13 声望
0 粉丝
文章目录
宣传栏