前端与后端传递数据 — — JSON(前端传给后端)

前端与后端传递数据 — — JSON 前端与后端传递数据 — — JSON1 前端传送JSON数据给后端1.1 application/x-www-form-urlencoded默认格式

推荐整理分享前端与后端传递数据 — — JSON(前端传给后端)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:前端和后端通过什么交互,前端与后端传递函数,前端后端数据传输,前端向后端传递数据的方式,前端与后端传递函数,前端向后端传递数据的方式,前端与后端传递数据,前端与后端传递的区别,内容如对您有帮助，希望把文章链接给更多的朋友！

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 总结RequestMapPojo不加注解√×√@RequestParam×√×@ResponseBody×××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测试 最后结果： 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发起测试：

最后结果：

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方法）：

@Datapublic class User { private String name; private Integer age;}

postman发起请求： 控制台消息：

User(name=张三, age=22)name>>>张三age>>>221.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发起请求：

控制台消息：

name>>>zhangsan age>>>23name>>>lisi age>>>151.2.5 前端的复杂请求

①编写接收类 ReqDTO

@Datapublic 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发起请求： ④控制台结果：

appointoutpatient 0 1 2 11 21 31 Sun Jun 20 11:43:11 CST 2021Thu Jul 21 12:23:34 CST 2022010

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

private String startDate;private String endDate;"---------------------------------------------"//格式化startDateDateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");LocalDateTime startDate = LocalDateTime.parse(reqDTO.getStartDate(), formatter);System.out.println(startDate);//endDateLocalDateTime endDate = LocalDateTime.parse(reqDTO.getEndDate(), formatter);System.out.println(endDate);//startInteger start = reqDTO.getStart();System.out.println(start);2 后端给前端传送JSON数据

①构建数据对象 User：

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

②构建方法，返回数据

@RestControllerpublic 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发起请求，查看响应结果

如果前端传递的是：{“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类型@SpringBootTestpublic 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.parseObjectString 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"}