前端给后端传数据的几种方式

1.发送get请求将参数通过？拼接在url后面

1. $.ajax({
2.         url: "/order/userPage?page="+page+"&pageSize="+pageSize,    //请求的url地址  
3.         cache: "false",   //设置为false将不会从浏览器中加载请求信息
4.         async: "true",    //true所有请求均为异步请求
5.         dataType: "json", //请求返回数据的格式
6.         type:"get",      //请求方式
8. 上面等同于==>>
9. async initData(){
11.    paging: {
12.       page: 1,
13.       pageSize: 5
14.    }
15.    const res = await orderPagingApi(this.paging)
16. }
18. function orderPagingApi(data) {
19.     return $axios({
20.         'url': '/order/userPage',
21.         'method': 'get',
22.         //请求参数
23.         params: {...data}
24.     })
26. 上面等同于==>>
27. async initData(){
29.    paging: {
30.       page: 1,
31.       pageSize: 5
32.    }
33.    const res = await orderPagingApi(this.paging)
34. }
36. function orderPagingApi(data) {
37.     return $axios({
39.         'url': '/order/userPage',
41.         'method': 'get',
43.         'data': data
44.     })

复制代码

后端接收参数

1. @GetMapping("/order/userPage")
3. @ResponseBody
5. public R<Page> userPage(Integer page,Integer pageSize){}
7. 或
9. @GetMapping("/order/userPage")
11. @ResponseBody
13. public R<Page> userPage(@RequestParam（"page"）Integer page,@RequestParam（"pageSize"）Integer pageSize){}

复制代码

2.将参数拼接在url中，后台通过占位符接收参数 /{id}

1. async initData(){
2.    
3.     const res = await addressFindOneApi(params.id)
4. }
6. ​​​​​​​function addressFindOneApi(id) {
7.   return $axios({
8.     'url': `/addressBook/${id}`,
9.     'method': 'get',
10.   })
11. }

复制代码

后端接收参数

1. @GetMapping("/addressBook/{id}")
2. @ResponseBody
4. public R<AddressBook> backList(@PathVariable("id")Long id){}

复制代码

3.通过post提交方式将form表单中的数据序列化后传递到后台。

1. async initData(){
3.     const res =await formAjax();
5. }
7. function formAjax() {
9.        $.ajax({
11.        url: "/login",
13.        type: "post",
15.        data: $("#form").serialize(),  // 对id为form的表单数据进行序列化并传递到后台

复制代码

后端接收参数

1. @RequestMapping("/login")
3. @ResponseBody
5. //form表单的数据与User实体类的数据相对应
7. public String login (User user) {}

复制代码

4.通过post提交方式将form表单的类型是 json

1. async initData(){
3.     const res =await formAjax();
5. }
7. function formAjax() {
9.        $.ajax({
11.        url: "/login",
13.        type: "post",
14.       
15.        contentType: 'application/json',

复制代码

后端接收参数

1. @RequestMapping("/login")
3. @ResponseBody
5. //form表单的数据与User实体类的数据相对应
7. public String login ( @RequestBody User user) {}

复制代码

5. 前台将普通数据转换为json

1. async initData(){
3.    paging: {
4.       page: 1,
5.       pageSize: 5
6.    }
7.    const res = await orderPagingApi(this.paging)
8. }
10. function orderPagingApi(data) {
11.     return $axios({
13.         'url': '/order/userPage',
15.         'method': 'post',
17.          data: JSON.stringify(data),
18.     })

复制代码

后台接收参数

1. @GetMapping("/order/userPage")
2. @ResponseBody
4. public R<Page> userPage(@RequesBody Map<Integer,Integer> map){
6.       Integer page = map.get("page");
7.         
8.       Integer pageSize = map.get("pageSize");   
10. }
12. 或  ==>>
13. //假设PageInfo类中有属性与其相对应
14. @GetMapping("/order/userPage")
15. @ResponseBody
17. public R<Page> userPage(@RequesBody PageInfo pageInfo){
19.      Integer page = pageInfo.getPage();
21.      Integer pageSize = pageInfo.getPageSize();
22. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。