当前位置: 首页 > article >正文

post get 给后端传参数

post

方式一  : data: params
作为请求体(Request Body)传递:
你已经展示了这种方式,通过data字段直接传递一个对象或数组。这种方式通常用于传递复杂的数据结构。

  
  dowmfrom: function (params) { 
        return request({ 
          url: "/admissionInfo/admissionDataDowload", 
          method: "post", 
          data: params, // 直接发送数组作为请求体
          responseType: 'blob', 
        }); 
      },
方式二 : params: params
通过URL参数传递:
这种方式适用于传递简单的键值对数据,通常用于GET请求,但在某些情况下POST请求也可能使用这种方式(尽管不推荐,因为它不如请求体安全)。
如果你的request函数支持将参数附加到URL(通常是通过params或query字段),你可以这样修改:


dowmfrom: function (params) { 
    return request({ 
        url: "/admissionInfo/admissionDataDowload", 
        method: "post", 
        params: params, // 注意这里使用了params而不是data
        responseType: 'blob', 
    }); 
},
方式三: data: formData
通过表单数据(Form Data)传递:
这种方式常用于需要上传文件或发送大量表单字段的情况。你可以使用FormData对象来构建表单数据。


dowmfrom: function (formData) { // 注意这里formData应该是一个FormData对象
    return request({ 
        url: "/admissionInfo/admissionDataDowload", 
        method: "post", 
        data: formData, 
        headers: {
            'Content-Type': 'multipart/form-data' // 通常不需要手动设置,因为axios会自动设置
        },
        responseType: 'blob', 
    }); 
},
方式四: data: params
通过请求头(Headers)传递:
这种方式不常见,通常用于传递认证令牌或其他元数据。数据本身不会放在请求头中,但可以在请求头中包含一些必要的标识符。

dowmfrom: function (token, params) { 
    return request({ 
        url: "/admissionInfo/admissionDataDowload", 
        method: "post", 
        data: params, 
        headers: {
            'Authorization': 'Bearer ' + token
        },
        responseType: 'blob', 
    }); 
},

get 

方式一  :  params: params
   dowmfrom: function (params) { 
        return request({ 
          url: "/admissionInfo/admissionDataDowload", 
          method: "get", 
          params: params,  // 直接发送数组作为请求体
          responseType: 'blob', 
        }); 
      },

方式二:   const url = constructUrl("/admissionInfo/admissionDataDowload", params);
直接构造URL:
如果你不想依赖客户端库自动处理参数,你可以手动构造完整的URL,包括查询字符串。然后,你可以将这个完整的URL传递给请求函数。


function constructUrl(baseUrl, params) {
    const queryString = new URLSearchParams(params).toString();
    return `${baseUrl}?${queryString}`;
}
 
dowmfrom: function (params) {
    const url = constructUrl("/admissionInfo/admissionDataDowload", params);
    return request({
        url: url,
        method: "get",
        responseType: 'blob',
    });
},
 方式三:/admissionInfo/admissionDataDowload?param1=${param1}&param2=${param2}`,
传递单个参数:
如果你的GET请求只需要传递一个或少数几个参数,你也可以直接在URL模板字符串中插入这些参数。但是,这种方法在处理多个参数或参数值包含特殊字符时不太方便。



dowmfrom: function (param1, param2) {
    return request({
        url: `/admissionInfo/admissionDataDowload?param1=${param1}&param2=${param2}`,
        method: "get",
        responseType: 'blob',
    });
},
方式四: params:  { id: id },
   webfielddel: function (id) {
        return request({
            url: "tableManage/del",
            method: "get",
            params:  { id: id },
        });
    },


页面使用的方式

方式一:
    dowmfrom: function (params) { 
        return request({ 
          url: "/admissionInfo/admissionDataDowload", 
          method: "post", 
          data: params, // 直接发送数组作为请求体
          responseType: 'blob', 
        }); 
      },
       



  downloadTemplate() {
      // 将 this.selectList 中的每个项目转换为字符串的数组
      const dowmids = this.selectList.map(item => item.toString());

      const dowm = JSON.parse(JSON.stringify(dowmids))

      // 调用 API 函数并直接传递数组
      allApi.dowmfrom(dowm)
        .then((res) => {
          console.log(res, '111');
          // 根据需要处理响应
        })
        .catch(err => {
          console.error('Error downloading template:', err);
        });
}

 
因为后端要  ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]   所以我们只传  dowm 就可以
 方式二:
    webfieldinit: function (params) {
        return request({
            url: "tableManage/getByOffice",
            method: "get",
            params: params,
        });
    },
  



 refreshList() {
            this.newtype = JSON.parse(this.value3)
          
            const params = {
                officeId: this.companyDTO,
                type: this.newtype,
            };
            webfield.webfieldinit(params).then((data) => {
                this.dataList = JSON.parse(data.data.content)
                
            }).catch((error) => {
                console.error('Error fetching data:', error);
                this.loading = false;
            });
        },
方式三:
    webfielddel: function (id) {
        return request({
            url: "tableManage/del",
            method: "get",
            params:  { id: id },
        });
    },

  webfield.webfielddel(this.ids).then((data) => {
                    console.log(data)
         
                }).catch((error) => {
                    console.error('Error fetching data:', error);
                
                });


   //、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
    // // 还原数据
        // restoration() {
        //     this.loading = true;
        //     console.log(this.loading, 'loading'); // 修正了拼写错误,从 'loda' 改为 'loading'

        //     if (this.ids === '' || this.ids === undefined || this.ids === null) {
        //         console.log('kong ')
        //         alert('已经还原成最初的原始数据了!');
        //         this.loading = false; // 如果不需要刷新页面,可以在这里直接设置 loading 为 false
        //     } else {
        //         console.log(this.ids, 'konglllll ')
        //         webfield.webfielddel(this.ids).then((data) => {
        //             console.log(data)
        //             this.assignDataToArrays();
        //             location.reload(true); // 仅在数据删除成功后刷新页面
        //         }).catch((error) => {
        //             console.error('Error fetching data:', error);
        //             this.loading = false; // 请求失败时设置 loading 为 false
        //         });
        //     }
        // }


http://www.kler.cn/a/571773.html

相关文章:

  • 爬虫系列之发送请求与响应《一》
  • 通俗版解释:分布式和微服务就像开餐厅
  • sa-token全局过滤器之写法优化(包含设置Order属性)
  • HiRT:利用分层机器人Transformer 增强机器人控制
  • 企业级Python后端数据库使用指南(简略版)
  • 计算机视觉算法实战——医学影像分割(主页有源码)
  • 深入解析Tiktokenizer:大语言模型中核心分词技术的原理与架构
  • Spring线程池学习笔记
  • [LeetCode]day33 150.逆波兰式求表达值 + 239.滑动窗口最大值
  • STM32MP1xx的启动流程
  • 【数据结构与算法】常见数据结构与算法在JDK和Spring中的实现:源码解析与实战代码!
  • Arm64架构的Linux服务器安装jdk8
  • 珈和科技亮相CCTV-13《新闻直播间》,AI多模态农业大模型引领智慧农业新变革
  • 【蓝桥杯集训·每日一题2025】 AcWing 5526. 平衡细菌 python
  • 最新Flutter导航拦截PopScope使用
  • 国家网络安全通报中心:大模型工具Ollama存在安全风险
  • Ubuntu的tmux配置
  • Delphi连接MySql数据库房
  • 高效玩转 PDF:实用的分割、合并操作详解
  • 迷你世界脚本道具接口:Item