java 框架

DAY10-JQuery02

2020-05-11  本文已影响0人  建国同学

一、JSON

格式

- JSON 就是一种有格式的字符串
[
   {”名称1” : 值, ”名称2” : 值2},
   {”名称1” : 值, ”名称2” : 值2}
]

var json = ‘{“id”:x, “name”:”xx”, “age”:xx}, {“id”:x2, “name”:”xx2”, “age”:xx2}’;

二、 JavaScript 中的 JSON

js对象和json对比

        var json0 = '{"id":1, "name":"zs", "age":"18"}';    // JSON
        console.log(json0.id);    // undefined
        var jsObj1 = {"id":1, "name":"zs", "age":18};       // JS对象
        console.log(jsObj1.name); // zs
        var jsObj2 = {id:1, name:"zs", age:18};             // JS对象
        console.log(jsObj2.age);  // 18

JSON与JS对象转换

         var jsObj1 = {"id":1, "name":"zs", "age":18};       // JS对象
        // 假装获取到服务器响应的数据, 有一种方式切割字符串,不可取的
        var json1 = '{"id":1, "name":"zs", "age":"18"}';  //JSON
         // 写JSON格式,这个格式的字符串里面存两个个员工数据 id:1  name:zs   age:18      id:2  name:ls   age:19
        var json2 = '[{"id":1, "name":"zs", "age":18}, {"id":2, "name":"ls", "age":19}]';
        // 写JSON格式,这个格式的字符串里面存两个个员工数据 id:1  name:zs   age:18   部门  id:5  name:开发部
        var json3 = '{"id":1, "name":"zs", "age":"18", "dept":{"id":5, "name":"开发部"}}';

        // JSON 浏览器环境提高一个工具, 里面提供方法实现两者的转换
        console.log(JSON.parse(json1));         // JSON字符串 ==> js对象        {id: 1, name: "zs", age: "18"}
        console.log(JSON.parse(json2));         // JSON字符串 ==> js对象    (2) [{…}, {…}]
        console.log(JSON.parse(json3));         // JSON字符串 ==> js对象    {id: 1, name: "zs", age: "18", dept: {…}}
        console.log(JSON.stringify(jsObj1));    // js对象  ==> JSON字符串   字符串 {"id":1,"name":"zs","age":18}

三、在Java中的JSON

 // 写JSON 格式 ,这个格式的字符串里面存一个员工数据, id:1  name:zs   age:18
        String json1 = "{\"id\":1, \"name\":\"zs\", \"age\":\"18\"}";

JSON与Java对象转换

开发中一般都会使用第三方的一些JSON操作的依赖或者JAR包来来完成Java对象与JSON字符串之间的转换。
在Java中,转换JSON的依赖或者JAR有很多,这里单讲两种常用:
Jackson:在SpringMVC中内置支持她,速度也挺快,稳定性比较好。
Fastjson:阿里出品,号称是Java领域中转换JSON最快的一个插件,中文文档比较齐全。

Jackson 依赖

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.6</version>
</dependency>

Fastjson 依赖

<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.47</version>
</dependency>

Jackson转换

       // JSON字符串与JAVA对象之间转换
        Department department = new Department();
        department.setId(1L);
        department.setName("开发部");
        department.setSn("SN01");

        ObjectMapper objectMapper = new ObjectMapper();
        // JAVA对象   =>  JSON字符串
        System.out.println(objectMapper.writeValueAsString(department));
        // JSON字符串 =>  JAVA对象
        System.out.println(objectMapper.readValue("{\"id\":1, \"name\":\"zs\", \"sn\":\"SN01\"}",Department.class));

console:
      {"id":1,"name":"开发部","sn":"SN01"}
      Department(id=1, name=zs, sn=SN01)

四、Spring MVC响应JSON

步骤

1、在pom.xml中添加Jackson依赖。
2、在mvc.xml配置MVC注解解析。(一般都已配置好了)
3、定义一个类,里面提供对应属性封装数据。
4、在要响应JSON数据的控制器的处理方法上贴@ResponseBody注解,且方法返回类型为上面定义的类。
5、在处理方法中创建上面定义类 的对象,封装数据返回即可。

例子

响应类型这样的JSON数据 {“success”:true,”msg”:”2020-03-16 10:00”}

@RequestMapping("/getTime")
    @ResponseBody
    public JsonResult getTime() {
        Date date = new Date();

        JsonResult jsonResult = new JsonResult();
        jsonResult.setMsg(date.toLocaleString());
        jsonResult.setSuccess(true);
        return jsonResult;

    }

响应类型多个部门]列表的JSON数据[{"id":1, "name":"开发部", "sn":"DEV"}, {"id":2, "name":"人事部","sn": "HR"}]

  @Autowired
   private IDepartmentService departmentService;
   //响应类型多个部门]列表的JSON数据[{"id":1, "name":"开发部", "sn":"DEV"}, {"id":2, "name":"人事部","sn": "HR"}]

   @RequestMapping("/depts")
   @ResponseBody
   public List<Department> depts() {
       return departmentService.listAll();
   }

五、AJAX概述

特点

缺陷

六、 jQuery中 AJAX操作

jQuery中AJAX方法

        var option = $.ajax({
            type: "POST", // 请求方式
            url: "some.php",    // 请求路径
            data: "name=John&location=Boston", // 请求参数
            success: function(msg){     // success函数, 服务器成功响应会执行函数第 个实参就是服务响应回来的数据
                alert( "Data Saved: " + msg );
            }
        });

        //第一个请求路径,第二个请求参数,服务响应回来执行函数第一个实参就是服务响应回来的数据
        $.get('some.php','name=John&location=Boston',function(msg){
                alert( "Data Saved: " + msg );
        });

        $.post('some.php','name=John&location=Boston',function(msg){
                alert( "Data Saved: " + msg );
        });

        $.ajax(option);
上一篇下一篇

猜你喜欢

热点阅读