JSON简单了解

JSON简单了解

简介

JSON （JavaScript Object Notation）:一种简单的数据格式，比xml更轻巧。JSON 是 JavaScript 原生格式，这意味着在 JavaScript中处理 JSON 数据不需要任何特殊的 API 或工具包。

JSON是一个序列化的对象或数组。

结构

• “名称/值”对的集合。不同的语言中，它被理解为对象，纪录，结构，字典，哈希表，有键列表，或者关联数组。
• 值的有序列表。在大部分语言中，它被理解为数组。

规则

• 数据在键值对中
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

数据类型

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在方括号中）
• 对象（在花括号中）
• null

// 对象
{
  "name":"yzq",
  "age":"23",
  "sex":"true",
}

// 数组
[
  {
      "name":"yzq",
      "age":"16"
  },
  {
      "name":"yuzhiqiang",
      "age":"23"
  }
]

多种格式可嵌套使用

json字符串与javascript对象的转换

JSON.parse() 方法:将JSON字符串转化为JavaScript对象

JSON.stringify() 方法:将JavaScript对象,转化为JSON字符串

后端返回json格式的数据

普通的返回json的方式就是(也是需要jackson依赖的)

ObjectMapper mapper = new ObjectMapper();//使用工具转化格式
String json = mapper.writeValueAsString(info);
response.setContentType("application/json;charset=utf-8");//设置响应头
response.getWriter().write(json);

在使用框架的项目中当然是使用注解更方便

首先需要导入jackson依赖

<!--Jackson依赖 -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.9.5</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.5</version>
</dependency>

在ssm项目Controller类的方法之前添加上@ResponseBody注解

• @responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后，写入到response对象的body区，通常用来返回JSON数据或者是XML数据。
• 一般在异步获取数据时使用【也就是AJAX】

@ResponseBody
@RequestMapping("test.do")
public PageInfo test() throws Exception {
    List<Product> productList = productService.findByPage(1,2);
    PageInfo pageInfo = new PageInfo(productList);
    return pageInfo;
}

前端使用ajax获取到json数据

通常我们使用jquery的ajax方法来发送异步请求获取数据

$.ajax

$.ajax({
        type:'GET',                // 请求方法: GET/POST, 默认:GET
        url:'ajax/ajax_checkAccountUserName', // 请求的地址
        data:{param:'request'}, // 请求参数
        dataType:'json',        // 数据格式, json/xml/...
        timeout:3000,           // 请求的超时时间（单位：毫秒）。
        cache:false,            // 是否缓存上一次的数据，默认:true
        async:true,             // 同步/异步请求
        beforeSend:function(){  // 发送请求前调用（一般不需要此函数）
            alert('before send');
        },
        success:function(data){ // 请求成功后的回调函数
            alert("$.ajax->" + data.account);
        },
        error: function(XMLHttpRequest, errMsg, errThrown) { //请求失败调用
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(errMsg);
        }
    });

$.get

$.get(
        'ajax/ajax_checkAccountUserName',
        {param:'admin'}, // 请求参数（可以省略）
        function(data) { // 请求成功后的回调函数（可以省略）
            alert("$.get->" + data.account);
        },
        'json'
    );

$.post

$.post(
        'ajax/ajax_checkAccountUserName',
        {param:'admin2'}, // 请求参数（可以省略）
        function(data) { // 请求成功后的回调函数（可以省略）
            alert("$.post->" + data.account);
        },
        'json'
    );