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}\¶m2={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
        //         });
        //     }
        // }
相关推荐
coder777712 分钟前
js逆向分享
javascript·爬虫·python·算法·安全
emoji11111119 分钟前
vue3、原生html交互传值
vue.js·html·交互
nothingbutluck46419 分钟前
2025.4.10 html有序、无序、定义列表、音视频标签
前端·html·音视频
爱上python的猴子1 小时前
chrome中的copy xpath 与copy full xpath的区别
前端·chrome
Lysun0012 小时前
dispaly: inline-flex 和 display: flex 的区别
前端·javascript·css
山禾女鬼0012 小时前
Vue 3 自定义指令
前端·javascript·vue.js
啊卡无敌2 小时前
Vue 3 reactive 和 ref 区别及 失去响应性问题
前端·javascript·vue.js
北桥苏2 小时前
Spine动画教程:皮肤制作
前端
涵信2 小时前
第九节:React HooksReact 18+新特性-React 19的use钩子如何简化异步操作?
前端·javascript·react.js
Aaaaaaaaaaayou2 小时前
浅玩一下 Mobile Use
前端·llm