vue 中 get / delete 传递数组参数方法


Posted in Vue.js onMarch 23, 2021

在前后端交互的时候,有时候需要通过 get 或者 delete 传递一个数组给后台,但是这样直接传递后台无法接收数据,因为在传递的过程中数组参数会被转译,结果如下:

参数:{ name : [ 1, 2, 3 ] }
转译效果:http://aaa.com?name[]=1&name[]=2&name[]=3
目标效果:http://aaa.com?name=1&name=2&name=3

解决办法:

使用 qs 插件 将数组参数序列化

1、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 输出结果:'a[0]=b&a[1]=c'
2、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 输出结果:'a[]=b&a[]=c'
3、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 输出结果:'a=b&a=c'
4、qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 输出结果:'a=b,c'

安装

npm install qs

使用

//在 axios 请求拦截器里面
import qs from 'qs'
axios.interceptors.request.use(request => {
 if (request.method === 'delete' || request.method === 'get') {
 request.paramsSerializer = function(params) {
  return qs.stringify(params, { arrayFormat: 'repeat' })
 }
 }
 return request
},(error) =>{
 return Promise.reject(error);
})

刚刚接触Vue2.5以上版本的新手程序员 不了解怎样传递参数的仅供参考

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
 
<body>
/*为了前后端更好的交互效果 引入axios.js 这个js文件*/
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    // axios请求参数传递
 
    // axios get请求传参
    // 传统格式的 get 请求
     axios.get('http://localhost:3000/axios?id=123')
      .then(function(ret){
      console.log(ret.data)
     })
     // restful 格式的 get 请求
     axios.get('http://localhost:3000/axios/123')
      .then(function(ret){
      console.log(ret.data)
     })
     // 携带参数的 get 请求
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret) {
      console.log(ret.data)
    })
 
    // // axios delete 请求传参
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret) {
      console.log(ret.data)
    })
 
    //-----------------------------------
 
    // 使用 axios 进行 post 请求,默认传递 json 数据
    axios.post('http://localhost:3000/axios', {
        'uname': 'lisi',
        'pwd': 123
      }).then(function(ret) {
        console.log(ret.data)
      })
      // 使用 axios 进行 post 请求,传递 form 表单数据
       var params = new URLSearchParams();
       params.append('uname', 'zhangsan');
       params.append('pwd', '111');
       axios.post('http://localhost:3000/axios', params)
        .then(function (ret) {
         console.log(ret.data)
        })
 
    // axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret) {
      console.log(ret.data)
    })
 
 
 
    // 对于 axios 来说,在 get 和 delete 请求中,参数要放入到 params 属性下
    // 在 post 和 put 请求中,参数直接放入到 对象中
  </script>
</body>
 
</html>

向后台发起请求的代码

app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})
app.delete('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

关于vue 中 get / delete 传递数组参数方法的文章就介绍到这了。

Vue.js 相关文章推荐
Vue实现简单购物车功能
Dec 13 Vue.js
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
使用Vue.js和MJML创建响应式电子邮件
vue+flask实现视频合成功能(拖拽上传)
Mar 04 #Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 #Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 #Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 #Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 #Vue.js
vue3.0 项目搭建和使用流程
Mar 04 #Vue.js
You might like
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JS函数实现动态添加CSS样式表文件
2012/12/15 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python实现人脸识别代码
2017/11/08 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python数据分析:关键字提取方式
2020/02/24 Python
文职个人求职信范文
2013/09/23 职场文书
初二生物教学反思
2014/02/03 职场文书
植树造林的宣传标语
2014/06/23 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
开学典礼校长致辞
2015/07/29 职场文书
健康教育主题班会
2015/08/14 职场文书
文明上网主题班会
2015/08/14 职场文书
同学会演讲稿
2019/04/02 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python