• SpringBoot中前后端数据交互 json 格式


    //前端使用jquery封装的ajax技术把封装好的json数据传输给后端
    //而在springboot项目中后端自动配置使用了google的jackson把传递给前端的数据自动转换为json格式,当然我们也可以不用默认,自定义设置
    
    $.ajax(
    {
        url:"http://www.microsoft.com",    //请求的url地址
        dataType:"json",   //返回格式为json
        async:true,//请求是否异步,默认为异步,这也是ajax重要特性
        data:{"id":"value"},    //参数值
        type:"POST",   //请求方式
        contentType: 'application/json;charset=utf-8' ,指定数据是以Json的形式传递
        beforeSend:function(){
            //请求前的处理
        },
        success:function(req){
            //请求成功时处理
        },
        complete:function(){
            //请求完成的处理
        },
        error:function(){
            //请求出错处理
        }
    }
    );
    
    
    
    
    //前端定义一个数组,把他转换为 json 格式
    function arr(){
      //定义一个数组 
      var cons = new Array(3); 
      for(var i = 0;i<3;i++){
        var con = {};
        con["id"] = 0;
        con["name"] = '张三';
        con["job"] = '学生';
        cons[i] = con;
      }
      var json = JSON.stringify(cons);
      alert("json数组为:"+json);    
    }
    
    
    
    //前端定义一个对象把他转化为json格式
    function demo(){
      var con = {};
      con["id"] = 0;
      con["name"] = '张三';
      con["job"] = '学生';
      var json = JSON.stringify(con);          
      alert("封装成json数据为:"+json);  
    }
    
    
    ////////////////////原理讲解///////////////////////////
    在数据传输过程中,JSON是以文本、即字符串的形式传递的,而JavaScript操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。
    JSON字符串:var str = "{name:'xmt',sex:'woman'}";
    JSON对象:var str = {name:'xmt',sex:'woman'};
    
    JSON字符串转化为JSON对象:var obj = JSON.parse(str);
    JSON对象转化为JSON字符串:var str = JSON.stringify(obj);
    
    

    在整理博客的时候突发奇想一个问题,前端传输的是 JSON 对象,或者 JSON 字符串到后端有什么区别呢???存取有什么不同???

    经过测试我发现一般我们进行前后端数据交互时都是用 json字符串 形式进行交互,把json字符串传给后端,后端再应用jackson或者fastjson等json转换工具,把json字符串转换为相对于的json对象
    
    

    经过接近一整天的测试我了解到,前端通过ajax传值到后端的话,一般都是通过json字符串的形式进行传递,并且contentType参数绝对不能设置为application/json,不然后端是取不到这个参数的,我们只能通过在后端用fastjson来转换json字符串为对应的json对象,在springboot中返回给ajax的data数据只需要通过方法的@ResponseBody注解进行返回即可,返回的数据springboot会自己转化为json的格式十分方便

    <button id="ibutton">提交</button>
    
    <div id="content"></div>
    
    
    <script type="text/javascript">
        var studentList = [];
        for (var i = 0; i < 3; i++) {
            var student = {};
            student["name"] = 'yuqiliu';
            student["sex"] = 'false';
            student["age"] = '20';
            studentList.push(student);
        }
        $("#ibutton").click(function () {
           $.ajax(
               {
                   url: "/index2",
                   data: {
                       'studentListStr': JSON.stringify(studentList)
                   },
                   dataType: "json",
                   type: "POST",
                   success: function (data) {
    
    
                        $("#content").html(
                            "<table>"+
                            "<th>" +
                                "<td>姓名</td>"+
                                "<td>年龄</td>"+
                                "<td>性别</td>"+
                            "</th>"+
                            "<tr>" +
                                "<td>"+data[0].name+"</td>"+
                                "<td>"+data[0].age+"</td>"+
                                "<td>"+(data[0].sex)+"</td>"+
                            "</tr>"+
                            "<tr>" +
                                "<td>"+data[1].name+"</td>"+
                                "<td>"+data[1].age+"</td>"+
                                "<td>"+data[1].sex+"</td>"+
                            "</tr>"+
                            "<tr>" +
                                "<td>"+data[2].name+"</td>"+
                                "<td>"+data[2].age+"</td>"+
                                "<td>"+data[2].sex+"</td>"+
                            "</tr>"+
                            "</table>"
                        )
                       console.log(data[0].name);
                   }
               }
           );
        });
    
    
    </script>
    

    fastjson对象,JSON,字符串,map之间的互转

    1.对象与字符串之间的互转

    将对象转换成为字符串
    String str = JSON.toJSONString(infoDo);
    字符串转换成为对象
    InfoDo infoDo = JSON.parseObject(strInfoDo, InfoDo.class);
    

    2.对象集合与字符串之间的互转

    将对象集合转换成为字符串
    String users = JSON.toJSONString(users);
    将字符串转换成为对象集合
    List<User> userList = JSON.parseArray(userStr, User.class);  
    

    3.字符串互转JSONObject

    String 转 Json对象
    JSONObject jsonObject = JSONObject.parseObject(jsonString);
    json对象转string
    JSONObject jsonObject = JSONObject.parseObject(str);//json对象转字符串 
    String jsonString = jsonObject.toJSONString();
    

    4.map与字符串之间互转

     //字符串转map
      JSONObject  jsonObject = JSONObject.parseObject(str);
      Map<String,Object> map = (Map<String,Object>)jsonObject;//    //json对象转Map
      //map转字符串
      String jsonString = JSON.toJSONString(map);
    

    5.Map 转 Json对象

    //map转json对象
        Map<String,Object> map = new HashMap<>();
        map.put("age", 24);
        map.put("name", "cool_summer_moon");
        JSONObject json = new JSONObject(map);
      //json对象转Map 
      Map<String,Object> map = (Map<String,Object>)jsonObject;
    
  • 相关阅读:
    RxJava API使用示例
    使用create-react-app模板模仿12306app
    web 基本概念辨异 —— URI 与 URL
    RESTful 架构与 RESTful 服务
    python startswith和endswith
    python enumerate函数用法
    python中PIL.Image和OpenCV图像格式相互转换
    Linux查看当前在线用户信息
    Linux查看GPU信息和使用情况
    python中的编码和解码
  • 原文地址:https://www.cnblogs.com/yuqiliu/p/12516761.html
Copyright © 2020-2023  润新知