ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端给后端传数据的几种方式 [打印本页]
作者: 傲渊山岳    时间: 2024-6-8 06:05
标题: 前端给后端传数据的几种方式
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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4