Vue中post请求接口时，以数组的形式传参处理方法

已于 2024-05-22 10:28:35 修改
阅读量1.6w 收藏 32
点赞数 20
分类专栏： Vue技术栈 文章标签： vue.js javascript 前端
于 2020-08-22 16:32:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41346436/article/details/108169741
版权

摘要：一般很多情况下，vue中请求接口的时候，data传参是都是字符串的形式，很少有以数组的形式，但是今天就遇到了，后端写接口的人也是真的傻X啊。

描述下需求：公司业务需要，需要做一个交货单核验的功能，意思就是利用条形码扫描仪扫描交货单上面的条形码，将扫描的结果通过事件提交给后台，然后后端判断结果
如图所示是所需要的设备，虽然这与本章博客主要内容无关，哈哈
在这里插入图片描述部分截图
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

后端给的说明文档：

在这里插入图片描述

代码片段


                

                
                
        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  HuiRonmantic
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    20
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    32
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  4
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
vue中接口请求使用post传数组参数的解决方式

				
			

			

				

					weixin_44703147的博客
				

				

					02-22
					
					8346
					
				

			

		

		

			
				
解决方式：就是把要传的数组参数string化（只需要把参数是数组的那些string化，其他按正常的格式），也就是在对应位置使用JSON.stringify(arr)。当然后端要对这些参数进行解码，php中使用json_decode($_POST[‘activity_picture’])
先贴示例代码，拿去急用
var objTemp = {
	merchant_id: 1,
	activity_title: "嗡嗡嗡",
	activity_picture: JSON.stringify(["falleg.

			
		

	



                

              
                



	

		

			

				
					
vue 请求参数数组_浅谈vue中get请求解决传输数据是数组格式的问题

				
			

			

				

					weixin_29535577的博客
				

				

					01-17
					
					1313
					
				

			

		

		

			
				
qs的stringify接收2个参数，第一个参数是需要序列化的对象，第二个参数是转化格式,一般默认格式是给出明确的索引，如：arr[0]=1&arr[1]=2//indices是index的复数格式，因此indices是索引的意思//bracket是括号的意思，因此arrayFormat:'brackets'代表数组下标为空[]qs.stringify({ arr: [1,2,3] }, ...

			
		

	



                


  
              

                


	

		

			

				
					
vue中的get方法\post方法如何实现传递数组参数

				
			

			

				

					qq_34936893的博客
				

				

					02-03
					
					6231
					
				

			

		

		

			
				
post方法传array数组的参数，且该数组参数是循环遍历所有元素按照get方法传参形式进行参数传递

			
		

	





	

		

			

				
					
vue组件传参的八种方式总结

					
最新发布

				
			

			

				

					ergdwqe的博客
				

				

					04-24
					
					1274
					
				

			

		

		

			
				
-props 接受到的均为 String -->-- 有只有属性没有值, 这种情况 props 指定类型是 Boolean 则接收到的是 true -->

			
		

	



		

			
		



	

		

			

				
					
Vue发送post请求时，请求参数为list数组形式 ----- 遇到的坑及解决

				
			

			

				

					RRRRRDong的博客
				

				

					07-17
					
					9981
					
				

			

		

		

			
				
需求：Vue项目中，批量删除列表项，调用删除接口时，需要把列表项以一个list数组形式传递给后台。

目标参数格式如下：

一开始使用原生axios来进行网络请求调用，参数格式错误，后台报了500错误，错误参数如下：

解决步骤：

封装一个request.js

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: '',
  timeout: 15000 // 请求超时时间
})
// requ.

			
		

	





	

		

			

				
					
vue中的post方法如何传递数组参数

				
			

			

				

					WLK654321的博客
				

				

					03-31
					
					717
					
				

			

		

		

			
				
vue中的post方法如何传递数组参数：项目中要用post方法传array数组的参数。直接传数组格式后台是取不到值的，我们需要把数组变成如下这种格式:

			
		

	





	

		

			

				
					
【vue】post请求接口时，以数组的形式传参处理方法

				
			

			

				

					@point
				

				

					10-22
					
					3379
					
				

			

		

		

			
				
需求：

做搜索时候的需求，需要给后端传数组



控件：


 <el-select
     v-model="search.projectUuidList"
     placeholder="请选择项目名称"
     filterable
     clearable
     @change="searchHandler"
  >
     <el-option
        v-for="item in projects"
        :key="item.proje.

			
		

	





	

		

			

				
					
Vue --- 记录Vue使用POST上传数组问题

				
			

			

				

					安歌
				

				

					08-06
					
					2561
					
				

			

		

		

			
				
记录Vue使用POST上传数组问题
后台代码:
    @PostMapping("/demo")
    public String demo(
            @RequestParam(value = "ids", required = false) List<Integer> ids,
            Integer id
    ) {
        log.info("集合:{}", ids);
        log.info("名称:{}", id);
    

			
		

	





	

		

			

				
					
Vue:axios中POST请求传参问题---传递数组 (补充)

				
			

			

				

					weixin_30823227的博客
				

				

					03-01
					
					990
					
				

			

		

		

			
				
在上一篇文章中提到的------transformRequest方法，也会将数组解析成字符串传给后台。
那么如何避免这个问题？
(一)　将数组转化为json字符串
通过JSON.stringify()转化为json字符串，这样后台拿到后在转化为数组即可。
这种方法基本可以解决绝大部分情况。
(二)　将数组通过append添加formData中。
我们后台是python语言，采用djan...

			
		

	





	

		

			

				
					
vue中get请求如何传递数组参数的方法示例

				
			

			

				

					10-16
				

			

		

		

			
				
通过这样的配置，你可以确保Vue应用在与后端通信时，GET请求中的数组参数能够被正确地序列化和传递。记得在实际项目中根据你的后端需求选择合适的数组格式，这有助于提高前后端协同开发的效率。

			
		

	





	

		

			

				
					
浅谈vue中get请求解决传输数据是数组格式的问题

				
			

			

				

					10-15
				

			

		

		

			
				
本文将探讨如何在Vue中使用GET请求处理数组格式的数据。  首先，让我们了解`qs`库。`qs`（Query String）是一个Node.js库，用于序列化和解析查询字符串。在处理GET请求的数组参数时，`qs.stringify()`方法非常有用。...

			
		

	





	

		

			

				
					
在vue中给后台接口传的值为数组的格式代码

				
			

			

				

					01-18
				

			

		

		

			
				
比如你要传的数组是在data中的return中的params中的Arrays。传值格式需要如下：

{flag: 1, data: this.params.Arrays}

如果要求是json格式，记得后面要加

{headers:{‘Content-Type’: ‘application/json’}}

补充知识：vue项目之前后台联调之以数组作为参数传给服务端
一、要求
由于项目特殊要求，上传到知识库的文件，再点击保存按钮，保存至项目数据库。
由于上传多个文件，保存操作后台要求前端用数组作为参数传过去。
二、代码
试了很多方式，刚开始用的 axios ，各种不行；最后选择用 jQuery

			
		

	





	

		

			

				
					
解决vue处理axios post请求传参的问题

				
			

			

				

					11-28
				

			

		

		

			
				
很多朋友在使用vue的过程中肯定会用到axios 请求，包括现在vux中已经自带了axios，而且用法也很简单，文档中写的比较清楚，但是当我们使用post提交时，却发现有时候会出现参数没有发送到服务器的问题，我记得文档中...

			
		

	





	

		

			

				
					
vue.js中$set与数组更新方法

				
			

			

				

					01-21
				

			

		

		

			
				
当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新： ex：  所以如果在实例创建后添加新的属性到实例上，则不会触发更新。 ps：现在有两...

			
		

	





	

		

			

				
					
关于vue接口query传递数组

				
			

			

				

					Benz_s600的博客
				

				

					03-18
					
					5591
					
				

			

		

		

			
				
关于vue接口query传递数组
重中之重



			
		

	





	

		

			

				
					
vue中axios get,post方式传递数组参数，二维数组参数

					
热门推荐

				
			

			

				

					静幽水
				

				

					11-02
					
					2万+
					
				

			

		

		

			
				
vue中axios post方式传递数组参数，二维数组参数



			
		

	





	

		

			

				
					
postman  请求参数为数组及JsonObject

				
			

			

				

					weixin_33842304的博客
				

				

					03-08
					
					3296
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
vue中给后台接口传的值为数组的格式|传的值为json类型

				
			

			

				

					qq_38916157的博客
				

				

					11-14
					
					2856
					
				

			

		

		

			
				
比如你的数据是在data中的return中的params中的Arrays。传值格式如下：
{flag: 1, data: this.params.Arrays}



			
		

	





	

		

			

				
					
vue框架 post请求传递数组

				
			

			

				

					11-21
				

			

		

		

			
				
可以使用axios库来发送post请求，并将数组作为请求参数传递。具体步骤如下：

1.在Vue组件中引入axios库

```javascript
import axios from 'axios'
```

2.使用axios发送post请求，并将数组作为请求参数传递

```javascript
axios.post('/api/postData', {
  id: [1, 2, 3]
})
.then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
})
```

3.在后端接口中使用@RequestParam注解接收数组参数

```java
@PostMapping("/postData")
public void postData(@RequestParam("id") Integer[] id) {
  // 处理接收到的数组参数
}
```



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 4

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值