JSON前后端传输数据

一.简介

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率 简单来说,JSON 就是一种字符串格式,这种格式无论是在前端还是在后端,都可以很容易的转换成对象,所以常用于前后端数据传递

前端和后端的对象是不能直接传输的,所以都转为JSON字符串传输

1.前端需要将前端对象转化为JSON串,将JSON串转化为前端对象

2.后端需要将后端对象转化为JSON串,将JSON串转化为后端对象

二.前端对象和JSON的相互转换 

1.JSON的语法

​ var obj="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}"

2. 对象和JSON的相互转换方法

• 通过JSON.parse()方法可以将一个JSON串转换成对象

• 通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串

3.示例代码

JSON转对象 

/* 定义一个JSON串 */
var personStr ='{"name":"张小明","age":20,"girlFriend":{"name":"铁铃","age":23},"foods":["苹果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黄","petType":"dog"},{"petName":"小花","petType":"cat"}]}'
console.log(personStr)
console.log(typeof personStr)
/* 将一个JSON串转换为对象 */
var person =JSON.parse(personStr);
console.log(person)
console.log(typeof person)
/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)

对象转JSON 

/* 定义一个对象 */
var person={
    'name':'张小明',
    'age':20,
    'girlFriend':{
        'name':'铁铃',
        'age':23
    },
    'foods':['苹果','香蕉','橘子','葡萄'],
    'pets':[
        {
            'petName':'大黄',
            'petType':'dog'
        },
        {
            'petName':'小花',
            'petType':'cat'
        }
    ]
}

/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)
/* 将对象转换成JSON字符串 */
var personStr =JSON.stringify(person)
console.log(personStr)
console.log(typeof personStr)

三.后端对象和JSON的相互转换 

1.导入jar包

在maven项目pom文件写入下面3个依赖

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

2.创建需要的传输数据对象

注意:要传输的类的定义一定要实现类的getter和setter方法不然就会报错.我们直接创建一个标准的javabean就可以了

例子

Dog类

public class Dog {
    private String name;
    private int age;


    public Dog() {
    }

    public Dog(String name, int age) {
        this.name = name;
        this.age = age;
    }

    /**
     * 获取
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * 设置
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * 获取
     * @return age
     */
    public int getAge() {
        return age;
    }

    /**
     * 设置
     * @param age
     */
    public void setAge(int age) {
        this.age = age;
    }

    public String toString() {
        return "Dog{name = " + name + ", age = " + age + "}";
    }
}

Person类 

public class Person {
    private String name;
    private int age;
    private Dog dog;


    public Person() {
    }

    public Person(String name, int age, Dog dog) {
        this.name = name;
        this.age = age;
        this.dog = dog;
    }

    /**
     * 获取
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * 设置
     * @param name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * 获取
     * @return age
     */
    public int getAge() {
        return age;
    }

    /**
     * 设置
     * @param age
     */
    public void setAge(int age) {
        this.age = age;
    }

    /**
     * 获取
     * @return dog
     */
    public Dog getDog() {
        return dog;
    }

    /**
     * 设置
     * @param dog
     */
    public void setDog(Dog dog) {
        this.dog = dog;
    }

    public String toString() {
        return "Person{name = " + name + ", age = " + age + ", dog = " + dog + "}";
    }
}

3.对象转JSON

public void Object2Json() throws JsonProcessingException {
        Dog dog = new Dog("小七", 2);
        Person person = new Person("张三", 18, dog);
        ObjectMapper objectMapper = new ObjectMapper();
        String jsonStr = objectMapper.writeValueAsString(person);
        System.out.println(jsonStr);
        //{"name":"张三","age":18,"dog":{"name":"小七","age":2}}
    }

4.JSON转对象

public void Json2Object() throws JsonProcessingException {
        String jsonStr = "{\"name\":\"张三\",\"age\":18,\"dog\":{\"name\":\"小七\",\"age\":2}}";
        ObjectMapper objectMapper = new ObjectMapper();
        Person person = objectMapper.readValue(jsonStr, Person.class);
        System.out.println(person);
        //Person{name = 张三, age = 18, dog = Dog{name = 小七, age = 2}}
}

5.map转JSON

public void map2Json() throws JsonProcessingException {
        Map<String, Object> map = new HashMap<>();
        map.put("name", "张三");
        map.put("age", 18);
        map.put("dog", new Dog("小七", 2));
        map.put("小王",new Person("小王", 18, new Dog("小七", 2)));
        String mapStr = new ObjectMapper().writeValueAsString(map);
        System.out.println(mapStr);
        //{"小王":{"name":"小王","age":18,"dog":{"name":"小七","age":2}},"name":"张三","dog":{"name":"小七","age":2},"age":18}
}

6.list和array转JSON 

public void listArray2Json() throws JsonProcessingException {
        ArrayList<String> list = new ArrayList<>();
        list.add("张三");
        list.add("李四");
        String listStr = new ObjectMapper().writeValueAsString(list);
        System.out.println(listStr);//["张三","李四"]
        Person[] person = new Person[2];
        person[0] = new Person("张三", 18, new Dog("小七", 2));
        person[1] = new Person("李四", 18, new Dog("小七", 2));
        String arrayStr = new ObjectMapper().writeValueAsString(person);
        System.out.println(arrayStr);
        //[{"name":"张三","age":18,"dog":{"name":"小七","age":2}},{"name":"李四","age":18,"dog":{"name":"小七","age":2}}]
}