前端给后端传数据的几种方式
1.发送get请求将参数通过?拼接在url后面2.将参数拼接在url中,后台通过占位符接收参数 /{id}3.通过post提交方式将form表单中的数据序列化后传递到后台。4.通过post提交方式将form表单的类型是 json5. 前台将普通数据转换为json
1.发送get请求将参数通过?拼接在url后面
$.ajax({ url: "/order/userPage?page="+page+"&pageSize="+pageSize, //请求的url地址 cache: "false", //设置为false将不会从浏览器中加载请求信息 async: "true", //true所有请求均为异步请求 dataType: "json", //请求返回数据的格式 type:"get", //请求方式 上面等同于==>>async initData(){ paging: { page: 1, pageSize: 5 } const res = await orderPagingApi(this.paging) } function orderPagingApi(data) { return $axios({ 'url': '/order/userPage', 'method': 'get', //请求参数 params: {...data} }) 上面等同于==>>async initData(){ paging: { page: 1, pageSize: 5 } const res = await orderPagingApi(this.paging) } function orderPagingApi(data) { return $axios({ 'url': '/order/userPage', 'method': 'get', 'data': data })
后端接收参数
@GetMapping("/order/userPage") @ResponseBody public R<Page> userPage(Integer page,Integer pageSize){} 或 @GetMapping("/order/userPage") @ResponseBody public R<Page> userPage(@RequestParam("page")Integer page,@RequestParam("pageSize")Integer pageSize){}
2.将参数拼接在url中,后台通过占位符接收参数 /{id}
async initData(){ const res = await addressFindOneApi(params.id)} function addressFindOneApi(id) { return $axios({ 'url': `/addressBook/${id}`, 'method': 'get', })}
后端接收参数
@GetMapping("/addressBook/{id}")@ResponseBody public R<AddressBook> backList(@PathVariable("id")Long id){}
3.通过post提交方式将form表单中的数据序列化后传递到后台。
async initData(){ const res =await formAjax(); } function formAjax() { $.ajax({ url: "/login", type: "post", data: $("#form").serialize(), // 对id为form的表单数据进行序列化并传递到后台
后端接收参数
@RequestMapping("/login") @ResponseBody //form表单的数据与User实体类的数据相对应 public String login (User user) {}
4.通过post提交方式将form表单的类型是 json
async initData(){ const res =await formAjax(); } function formAjax() { $.ajax({ url: "/login", type: "post", contentType: 'application/json',
后端接收参数
@RequestMapping("/login") @ResponseBody //form表单的数据与User实体类的数据相对应 public String login ( @RequestBody User user) {}
5. 前台将普通数据转换为json
async initData(){ paging: { page: 1, pageSize: 5 } const res = await orderPagingApi(this.paging) } function orderPagingApi(data) { return $axios({ 'url': '/order/userPage', 'method': 'post', data: JSON.stringify(data), })
后台接收参数
@GetMapping("/order/userPage")@ResponseBody public R<Page> userPage(@RequesBody Map<Integer,Integer> map){ Integer page = map.get("page"); Integer pageSize = map.get("pageSize"); } 或 ==>>//假设PageInfo类中有属性与其相对应@GetMapping("/order/userPage")@ResponseBody public R<Page> userPage(@RequesBody PageInfo pageInfo){ Integer page = pageInfo.getPage(); Integer pageSize = pageInfo.getPageSize();}