前端与后端传递数据 — — JSON

我就是我 2024-04-03 10:49 109阅读 0赞

## 前端与后端传递数据 — — JSON ##

### 1 前端传送JSON数据给后端 ###

#### 1.1 application/x-www-form-urlencoded默认格式 ####

![在这里插入图片描述][c4ac339f60994b06ac2665f35a014ef5.png]

##### 1.1.1 通过HttpServletRequest获取数据 #####

/**
      * 通过request获取数据
      * @param request
      * @return
      */
     @PostMapping("/testDefaultWithNoAnno1")
     public String testDefaultWithNoAnno1(HttpServletRequest request){
        
         String name = request.getParameter("name");
         System.out.println("str>>>" + name);
         return "testDefaultWithNoAnno1 success";
     }

##### 1.1.2 通过实体类获取数据 #####

/**
      * 通过实体类获取[Pojo]
      * @param user
      * @return
      */
     @PostMapping("/testDefaultWithNoAnno2")
     public String testDefaultWithNoAnno1(User user){
        
         System.out.println(user.getName() + "  " + user.getAge());
         return "testDefaultWithNoAnno2 success";
     }

##### 1.1.3 通过@RequestParam+Map获取 #####

/**
      * 通过Map方式+@RequestParam注解
      * @param map
      * @return
      */
     @PostMapping("/testDefaultByAnno1")
     public String testDefaultByAnno(@RequestParam Map<String, Object> map){
        
         String name = (String) map.get("name");
         System.out.println("name>>>" + name);
         return "testDefaultByAnno1 success";
     }

##### 1.1.4 总结 #####

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>Request</th> 
   <th>Map</th> 
   <th>Pojo</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>不加注解</td> 
   <td>√</td> 
   <td>×</td> 
   <td>√</td> 
  </tr> 
  <tr> 
   <td>@RequestParam</td> 
   <td>×</td> 
   <td>√</td> 
   <td>×</td> 
  </tr> 
  <tr> 
   <td>@ResponseBody</td> 
   <td>×</td> 
   <td>×</td> 
   <td>×</td> 
  </tr> 
 </tbody> 
</table>

#### 1.2 application/json格式 ####

> 注意：一般来说要通过body传送数据是使用POST方式，此处为了简单，暂用GET方式

##### 1.2.1 传送普通字符串 #####

@GetMapping("testJsonByStr")
    public String testJSONByStr(@RequestBody String str){
        
        System.out.println("str>>>" + str);
        return "testJsonByStr success";
    }

*  postman测试  
    ![在这里插入图片描述][ac9ae6e7ad204c2fab980e7cebec0244.png]
 *  最后结果：  
    ![在这里插入图片描述][2af35d52878a4bd28ccbf67e29e7abb0.png]

##### 1.2.2 传送json数组 #####

@GetMapping("/testJsonByArr")
    public String testJSONByArr(@RequestBody List<String> list){
        
        for(String str : list){
        
            System.out.println("str>>>" + str);
        }
        return "testJsonByArr success";
    }

*  postman发起测试：  
    ![在这里插入图片描述][1b7acaf7d88e49ad987cbebf48f13f90.png]
 *  最后结果：  
    ![在这里插入图片描述][6e28179a7bff47e3bfa54febc4f0e070.png]

##### 1.2.3 传送json对象 #####

//Json对象
    @GetMapping("/testJsonByObj")
    public String testJSONByObj(@RequestBody User user){
        
        System.out.println(user);
        System.out.println("name>>>" + user.getName());
        System.out.println("age>>>" + user.getAge());
        return "testJsonByObj success";
    }

User对象（一定要有get方法）：

@Data
    public class User {
        
        private String name;
        private Integer age;
    }

postman发起请求：  
![在这里插入图片描述][f5d4028e4534429a89b15df3765b5109.png]  
控制台消息：

User(name=张三, age=22)
    name>>>张三
    age>>>22

##### 1.2.4 传送json对象数组 #####

//Json对象数组
    @GetMapping("/testJsonByObjArr")
    public String testJsonByObjArr(@RequestBody List<User> userList){
        
        for(User user : userList){
        
            System.out.print("name>>>" + user.getName() + "   ");
            System.out.println("age>>>" + user.getAge());
        }
        return "testJsonByObjArr success";
    }

postman发起请求：  
![在这里插入图片描述][6f4543f3a71c4f18a6118fa7279d6229.png]

控制台消息：

name>>>zhangsan   age>>>23
    name>>>lisi   age>>>15

##### 1.2.5 前端的复杂请求 #####

①编写接收类  
ReqDTO

@Data
    public class ReqDTO {
        
        private List<String> busType;
        private List<Integer> orderStatus;
        private List<String> userIds;
        //@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")一般来说也可以，但是需要精确到小时【GTM 八小时时差】
        //因此使用jackson
        @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
        private Date startDate;
    
        @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
        private Date endDate;
        private Integer start;
        private Integer limit;
    }

②编写controller接收

@GetMapping("/testJsonByComplex")
    public String testJsonByMap(@RequestBody List<ReqDTO> list){
        
        ReqDTO reqDTO = list.get(0);
        //busType
        List<String> busType = reqDTO.getBusType();
        for(String str : busType){
        
            System.out.println(str + "  ");
        }
        //orderStatus
        List<Integer> orderStatus = reqDTO.getOrderStatus();
        for(Integer i : orderStatus){
        
            System.out.println(i + "   ");
        }
        //userIds
        List<String> userIds = reqDTO.getUserIds();
        for(String id : userIds ){
        
            System.out.println(id + "    ");
        }
        //startDate
        Date startDate = reqDTO.getStartDate();
        System.out.println(startDate);
        //endDate
        Date endDate = reqDTO.getEndDate();
        System.out.println(endDate);
        //start
        Integer start = reqDTO.getStart();
        System.out.println(start);
        //limit
        Integer limit = reqDTO.getLimit();
        System.out.println(limit);
        return "testJsonByComplex success";
    }

③postman发起请求：  
![在这里插入图片描述][db88d9a688c14ae0be43612779db9da2.png]  
④控制台结果：

appoint  
    outpatient  
    0   
    1   
    2   
    11    
    21    
    31    
    Sun Jun 20 11:43:11 CST 2021
    Thu Jul 21 12:23:34 CST 2022
    0
    10

拓展【格式化时间的其他方式】：

private String startDate;
    
    private String endDate;
    
    "---------------------------------------------"
    //格式化startDate
    DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
    LocalDateTime startDate = LocalDateTime.parse(reqDTO.getStartDate(), formatter);
    System.out.println(startDate);
    //endDate
    LocalDateTime endDate = LocalDateTime.parse(reqDTO.getEndDate(), formatter);
    System.out.println(endDate);
    //start
    Integer start = reqDTO.getStart();
    System.out.println(start);

### 2 后端给前端传送JSON数据 ###

①构建数据对象  
User：

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class User {
        
        private String name;
        private Integer age;
    }

②构建方法，返回数据

@RestController
    public class JSONController {
        
    	@GetMapping("/backToFront")
    	public Map<String, Object> backToFront(@RequestBody String test){
        
    	    Map<String, Object> result = new HashMap<>();
    	    result.put("msg", "查询成功");
    	    result.put("code", 200);
    	    //构建数据列表
    	    List<User> userList = new ArrayList<>();
    	    User user1 = new User("C罗", 26);
    	    User user2 = new User("梅西", 25);
    	    userList.add(user1);
    	    userList.add(user2);
    	    result.put("data", userList);
    	    return result;
    	}
    }

③postman发起请求，查看响应结果  
![在这里插入图片描述][a8477bf64deb45a5ae8d4174d65aaa7f.png]

*  如果前端传递的是：\{“userId”:“zhangwei”,“groupId”:131,“userOrder”:30\} 后端用String接收，然后JSONObject.parse(),就可以转化为JSONObject了
 *  如果前端传递的是：\[\{“groupId”:1,“userOrder”:1\},\{“userId”:“a’s’d”,“groupId”:1,“userOrder”:2\}\] 后端也用String接收，然后JSONArray.parseArray(),就可以转换成JSONArray了

### 3 详述 application/json 与Content-Type关系 ###

首先，application/json是Content-Type的一种。

Content-Type:在HTTP的请求头中，可以使用Content-type来指定上传参数不同格式的请求信息。

> get方法：在url中说明情请求的资源，比如https://www.baidu.com/com?from=self&name=xx 其中？后的数据就是请求的数据，并且连接用&，get方法也可以提交表单数据，但是提交的数据在url中，其他人可以通过查看历史记录中的url来获取你提交的数据，这样很不安全.  
>   
>   
> post方法：传输数据不在url中，而在数据段中出现，并且请求头多了Content-Type 和 Content-Length，post提交表单数据的时候比get方法更安全.

Content-Type类型：

*  application/x-www-form-urlencoded，key&value形式，所有浏览器都支持，但是后端解析麻烦

> application/x-www-form-urlencoded是默认的请求头，其ajax的请求数据格式是json

*  application/json，json串形式JavaScript Object Notation，后端解析简单，但部分浏览器不支持
 *  multipart/form-data，主要用于文件上传，将文件转成二进制数据进行传输，不涉及转码
 *  text/plain，是使用纯文本进行传输，平时用的很少

参考文章：https://blog.csdn.net/weixin\_40599109/article/details/113614103

### 4 多级JSON解析 ###

#### 4.1 map类型 ####

@SpringBootTest
    public class SfTest {
        
    
        @Test
        public void testSign(){
        
            String responseStr = "{\n" +
                    "    \"success\": true,\n" +
                    "    \"message\": null,\n" +
                    "    \"code\": \"velit Ut labore cillum eu\",\n" +
                    "    \"result\": {\n" +
                    "        \"deliveryType\": 1, //0：预约送达单 1：立即单 3：预约上门单\n" +
                    "        \"expectTime\": 1546845547, //预计送达（上门）时间\n" +
                    "        \"startTime\": 1546841347, //预计开始配送的时间\n" +
                    "        \"promiseDeliveryTime\": 70, //预计配送时间（单位: 分）\n" +
                    "        \"deliveryDistanceMeter\": \"6145\", //配送距离\n" +
                    "        \"chargePriceList\": {\n" +
                    "            \"shopPayPrice\": 1200, //配送费总额（单位:分）\n" +
                    "            \"chargesDetail\": {\n" +
                    "                \"basicFee\": 1100, //常规配送费=起步价+超距离费+超重量费\n" +
                    "                \"basic\": 900, //起步价\n" +
                    "                \"overDistance\": 100, //超距离费用\n" +
                    "                \"overWeight\": 0, //超重量费用\n" +
                    "                \"cancelExcessFee\": 0, //拒收扣费\n" +
                    "                \"specialTimeFee\": 0, //特殊时段费\n" +
                    "                \"vasFee\": 0, //增值服务费\n" +
                    "                \"vasFeeDetail\": { //增值服务费详情\n" +
                    "                    \"packingFee\": 0, //包材费\n" +
                    "                    \"lowTempFee\": 0, //低温服务费 \n" +
                    "                    \"takeGoodsSmsFee\": 0, //取货短信费\n" +
                    "                    \"insured\": {\n" +
                    "                        \"fee\": 0, //保价费\n" +
                    "                        \"declaredPrice\": 0\n" +
                    "                    },\n" +
                    "                    \"bigOrder\": {\n" +
                    "                        \"fee\": 0, //大额单费\n" +
                    "                        \"amount\": 0\n" +
                    "                    },\n" +
                    "                    \"collection\": {\n" +
                    "                        \"fee\": 0, //代收货款费用\n" +
                    "                        \"price\": 0\n" +
                    "                    },\n" +
                    "                    \"personDirectFee\": 0, //专人直送费用\n" +
                    "                    \"vehicleCarFee\": 0 //小轿车配送费用\n" +
                    "                },\n" +
                    "                \"extraFee\": 0, //附加费\n" +
                    "                \"extraFeeDetail\": {\n" +
                    "                    \"geographyFee\": 0\n" +
                    "                }\n" +
                    "            }\n" +
                    "        },\n" +
                    "        \"gratuityFee\": 100, //订单小费\n" +
                    "        \"pushTime\": 1546841347,\n" +
                    "        //以下字段受请求参数中 return_flag 控制：return_flag中未包含的，此字段将不存在，请注意！\n" +
                    "        \"totalPrice\": 1300, //配送费总额，当return_flag中包含1时返回，单位分（值为计算出来此单总价）\n" +
                    "        \"deliveryDistance_meter\": 1234, //配送距离，当return_flag中包含2时返回，单位米（值为计算出来实际配送距离）\n" +
                    "        \"weightGram\": 1000, //商品重量，当return_flag中包含4时返回，单位克（值为下单传入参数回传）\n" +
                    "        \"startTime\": 123456789, //起送时间，当return_flag中包含8时返回，时间格式为Unix时间戳，注意转换\n" +
                    "        \"expectTime\": 123456789, //预计送达时间，当return_flag中包含16时返回，时间格式为Unix时间戳，注意转换\n" +
                    "        \"totalPayMoney\": 1300, //支付费用，当return_flag中包含32时返回，单位分\n" +
                    "        \"realPayMoney\": 1300,//实际支付金额，当return_flag中包含64时返回，单位分（实际支付金额=总金额-优惠券总金额）\n" +
                    "        \"overflowFee\": 200, //爆单费，单位分\n" +
                    "        \"settlementType\": 1 //结算方式，当return_flag中包含256时返回\n" +
                    "    }\n" +
                    "}";
            JSONObject jsonObject = JSONObject.parseObject(responseStr);
            JSONObject result = jsonObject.getJSONObject("result");
            JSONObject chargePriceList = result.getJSONObject("chargePriceList");
            Object shopPayPrice = chargePriceList.get("shopPayPrice");
            System.out.println(shopPayPrice);//1200
        }
    }

#### 4.2 数组类型 ####

JSONArray jsonArray = JSONArray.parseArray(priceObj.get("result").toString());

#### 4.3 json工具的使用（fastjson为例） ####

##### ①JSON（JSON.toJSONString、JSON.parseArray） #####

*  JSON.toJSONString

Car car = new Car();
     car.setType("AC");
     car.setId(1);
     car.setPrePrice(true);
     car.setPrice(43.0);
     String jsonStr = JSON.toJSONString(car);
     System.out.println(jsonStr);
     //{"id":1,"prePrice":true,"price":43.0,"type":"AC"}

*  JSON.parseArray

String str = "[\n" +
             "    {\n" +
             "        \"deliverTime\": \"2021-12-15 18:00:00\",\n" +
             "        \"price\": 1,\n" +
             "        \"businessTypeDesc\": \"顺丰标快\",\n" +
             "        \"businessType\": \"2\"\n" +
             "    }\n" +
             "]";
     JSONArray array = JSON.parseArray(str);
     String jsonStr = JSON.toJSONString(array.get(0));
     String time = (String) JSONObject.parseObject(jsonStr).get("deliverTime");
     System.out.println(time);
     //2021-12-15 18:00:00

##### ②JSONObject（JSONObject.parseObject、JSONObject.toJSONString） #####

*  JSONObject.parseObject

String str = "{\n" +
            "    \"deliverTime\": \"2021-12-15 18:00:00\",\n" +
            "    \"price\": 1,\n" +
            "    \"businessTypeDesc\": \"顺丰标快\",\n" +
            "    \"businessType\": \"2\"\n" +
            "}";
    JSONObject jsonObj = JSONObject.parseObject(str);
    Object businessTypeDesc = jsonObj.get("businessTypeDesc");
    System.out.println(businessTypeDesc);
    //顺丰标快

*  JSONObject.toJSONString

Car car = new Car();
     car.setType("AC");
     car.setId(1);
     car.setPrePrice(true);
     car.setPrice(43.0);
    
     String jsonStr = JSONObject.toJSONString(car);
     System.out.println(jsonStr);
     //{"id":1,"prePrice":true,"price":43.0,"type":"AC"}

[c4ac339f60994b06ac2665f35a014ef5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/74f51a8f3e4b454b8e5d9c7bb5f1421e.png
[ac9ae6e7ad204c2fab980e7cebec0244.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/68cbda42608641b7a70e21e29337801e.png
[2af35d52878a4bd28ccbf67e29e7abb0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/cb77c867ec2444cc8102038931353806.png
[1b7acaf7d88e49ad987cbebf48f13f90.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/e85282cad6b247e99dd322decc449679.png
[6e28179a7bff47e3bfa54febc4f0e070.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/07cddae2b622491bba5cd5b018591412.png
[f5d4028e4534429a89b15df3765b5109.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f16fbac45c0a41b98036b5c686dcf18e.png
[6f4543f3a71c4f18a6118fa7279d6229.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/527e6d5fe1d346149339bd77e6589eab.png
[db88d9a688c14ae0be43612779db9da2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/442f1e91e2784f59aa59e78ba45a3d7c.png
[a8477bf64deb45a5ae8d4174d65aaa7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/ef2d41b2b2ab49cebcbd984ed4015880.png