脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 传递数组参数

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

 更新时间：2021年03月22日 09:54:31   作者：三个木马人  
这篇文章主要介绍了vue 中 get / delete 传递数组参数方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

在前后端交互的时候，有时候需要通过 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);
})

知识点扩展：Vue中 的Get , Delete , Post , Put 传递参数

刚刚接触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 传递数组参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue2.0如何借用vue-pdf实现在线预览pdf文件

    vue2.0如何借用vue-pdf实现在线预览pdf文件

    这篇文章主要介绍了vue2.0如何借用vue-pdf实现在线预览pdf文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 6种Vue中常用数据加密方式的使用详解

    6种Vue中常用数据加密方式的使用详解

    在Vue.js项目中,你可能需要执行数据加密以确保敏感信息的安全,这篇文章为大家整理了Vue中常用的6种数据加密方式的使用,需要的小伙伴可以参考下
    2024-03-03
  • Vue中组件之间数据的传递的示例代码

    Vue中组件之间数据的传递的示例代码

    本篇文章主要介绍了Vue中组件数据的传递的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue项目使用axios封装request请求的过程

    vue项目使用axios封装request请求的过程

    这篇文章主要介绍了vue项目使用axios封装request请求，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    element-plus 在vue3 中不生效的原因解决方法(element-plus引入)

    这篇文章主要介绍了element-plus 在vue3 中不生效的原因解决方法(element-plus引入),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-08-08
  • vue-element-admin搭建后台管理系统的实现步骤

    vue-element-admin搭建后台管理系统的实现步骤

    本文主要介绍了vue-element-admin搭建后台管理系统的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-10-10
  • vue 中几种传值方法(3种)

    vue 中几种传值方法(3种)

    这篇文章主要介绍了vue 中几种传值方法(3种),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue实现验证码倒计时按钮

    vue实现验证码倒计时按钮

    这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vuejs+element-ui+laravel5.4上传文件的示例代码

    vuejs+element-ui+laravel5.4上传文件的示例代码

    本篇文章主要介绍了vuejs+element-ui+laravel5.4上传文件的示例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • vue中checkbox如何修改为圆形样式

    vue中checkbox如何修改为圆形样式

    这篇文章主要介绍了vue中checkbox如何修改为圆形样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12

最新评论