Josn应用

JSON

定义

​ Json是一种轻量级的数据交换标准，用于浏览器和服务器的数据交换。

​ 数据交换：将数据转换成一个中间的，与平台无关的数据发送给另外一方处理

​ 轻量级：相对xml而言，json编写更简单，数据量小，解析速度快

数据转换

前端

json创建单个js对象

        function f1() {
            let obj = {
                "name": "张三",
                "age": 10
            };
            alert(obj.age);
        }
<a href="javascript:;" onclick="f1();">json创建单个js对象</a><br/>	//10

json创建js数组对象

        function f2() {
            let arr = [{
                "name": "张三",
                "age": 10
            }, {
                "name": "李四",
                "age": 20
            }];
            alert(arr[1].name);
        }
<a href="javascript:;" onclick="f2();">json创建js数组对象</a><br/>	//李四

json字符串转成js对象

        function f3() {
            let str = '{ "name": "张三","age": 10}';
            let obj = JSON.parse(str);
            alert(obj.name);
        }
<a href="javascript:;" onclick="f3();">json字符串转成js对象</a><br/>	//张三

js对象转成json字符串

        function f4() {
            let obj = {"name": "张三", "age": 10};
            let str = JSON.stringify(obj);
            alert(str);
        }
<a href="javascript:;" onclick="f4();">js对象转成json字符串</a>	//{"name":"张三","age":10}

Java

导入jar：fastjson-1.2.68.jar（阿里的）或者gson-2.2.4.jar（谷歌的）

对象转成字符串

        User user = new User("jack", 10);
        String str = JSON.toJSONString(user);	//{"age":10,"name":"jack"}

        Gson gson = new Gson();
        String json = gson.toJson(user);	//{"name":"jack","age":10}

List转成字符串

        User user = new User("jack", 10);
        User rose = new User("rose", 51);
        List<User> list = Lists.newArrayList(user, rose);
        String s = JSON.toJSONString(list);		//[{"age":10,"name":"jack"},{"age":51,"name":"rose"}]

        Gson gson = new Gson();
        String toJson = gson.toJson(list);	//[{"name":"jack","age":10},{"name":"rose","age":51}]

Map转成字符串

        User user = new User("jack", 10);
        User rose = new User("rose", 51);
        Map<String, User> map = ImmutableBiMap.of("u1", user, "u2", rose);
        String jsonString = JSON.toJSONString(map);	//{"u1":{"age":10,"name":"jack"},"u2":{"age":51,"name":"rose"}}

        Gson gson = new Gson();
        String strMap = gson.toJson(map);	//{"u1":{"name":"jack","age":10},"u2":{"name":"rose","age":51}}

字符串转成对象

        String str = "{\"age\":10,\"name\":\"jack\"}";
        User user = JSON.parseObject(str, User.class);	//User(name=jack, age=10)

        Gson gson = new Gson();
        User user1 = gson.fromJson(str, User.class);

字符串转成List

        String str = "[{\"age\":10,\"name\":\"jack\"},{\"age\":51,\"name\":\"rose\"}]";
        List<User> list = JSON.parseArray(str, User.class);	  //[User(name=jack, age=10), User(name=rose, age=51)]

        Gson gson = new Gson();
        List<User> list1 = gson.fromJson(str, new TypeToken<List<User>>() {}.getType());

后端接收前端的Josn

前端json

{
    "phone":"15915849463" , 
    "num":"拆机",
    "deleted":1,
    "userIdList":[1]
}

后端

package com.night.eneity;

import lombok.Data;

import java.io.Serializable;
import java.util.List;

@Data
public class Ass implements Serializable {
    private String phone;
    private String num;
    private Integer deleted;
    private List<Integer> userIdList;
}

package com.night.ctrl;

import com.night.eneity.Ass;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class AssController {
    @RequestMapping("ass")
    @ResponseBody
    public Ass printAss(@RequestBody Ass ass) {
        Ass ass1 = new Ass();
        ass1.setPhone(ass.getPhone());
        ass1.setNum(ass.getNum());
        ass1.setDeleted(ass.getDeleted());
        ass1.setUserIdList(ass.getUserIdList());
        System.out.println(ass1.toString());
        return ass1;
    }
}
//Ass(phone=15915849463, num=拆机, deleted=1, userIdList=[1])

演示

每5秒显示排名前三的数据

package controller;

import com.alibaba.fastjson.JSON;
import lombok.SneakyThrows;
import pojo.Sale;
import service.impl.SaleServiceImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("*.sale")
public class SaleServlet extends HttpServlet {
    @SneakyThrows
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        String url = req.getRequestURI();
        url = url.substring(url.lastIndexOf("/"), url.lastIndexOf("."));

        if (url.equals("/sale")) {
            List<Sale> list = new SaleServiceImpl().findTop();
            String string = JSON.toJSONString(list);
            System.out.println(string);
            out.print(string);
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/ajax.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            border: 1px solid red;
        }
    </style>
    <script>
        function f2() {
            let xhr = getXhr();
            xhr.open("get", "sale.do", true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let text = xhr.responseText;    //获取controller传输的数据
                    let parse = JSON.parse(text);   //转换格式：字符串转换成js对象
                    let descText = '当前销售最好的前三商品如下:<br/>';
                    //循环遍历、拼接
                    for (let i = 0; i < parse.length; i++) {
                        let sale = parse[i];
                        descText += '商品名称:' + sale.prodName + ",销售数量:" + sale.qty + "<br/>";
                    }
                    document.getElementById("saleMassage").innerHTML = descText;
                }
            }
            xhr.send(null);
        }

        function f1() {
            f2();//因为定时器第一次是在5秒后才执行f2方法，所以需要提前调用f2方法
            setInterval(f2, 5000); //定时器，每5秒调用一次f2方法
        }
    </script>

</head>
<body onload="f1();">
<div id="saleMassage"></div>
</body>
</html>