原生js 传数组作为参数 之get /post

本文详细介绍了在使用原生JavaScript进行HTTP请求时,如何正确处理数组类型的参数,尤其是在GET和POST请求中。通过一个具体示例,展示了如何格式化数据,确保数组可以被正确地传递给服务器。

 1.get 方式

 var getData={

        questionIDs:qustionArr

}

 var questionArr=[]
  questionArr.push(12345678)

// 定义一个函数  关键就在这里 原生的请求传数组是行不通的,需要将数据做一个格式化处理

function formatDate() {
      for(var i in postData){
           if(Array.isArray(postData[i])){
                   for(var j=0;j<postData[i].length;j++){
                           a+=i+"%5B%5D="+postData[i][j]+'&'
                        }
                   }else{
                          a+=i+"="+postData[i]+'&' 
                      }
                }
                 a=a.substring(0,a.length-1)
            }
            formatDate()

// 接下来是正常的发送get请求了

 var xhr=new XMLHttpRequest()

// 这里要将格式化的数据作为参数传递给后台

xhr.open( 'get' ,‘http://baidu.com’+a,true )

xhr.send()

  xhr.onreadystatechange = function() {
                // 上传成功
                if (xhr.readyState == 4 && xhr.status == 200) {

                    var res = JSON.parse(xhr.response)        //这里要用JSON转化一下

                 }else{  alert('获取数据失败' )   }

}

2.post  方式

   数据的格式化操作是一样的 , 请求的写法不同。

 var xhr=new XMLHttpRequest()

// 这里要将格式化的数据作为参数传递给后台

xhr.open( 'post' ,‘http://baidu.com’,true )

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //使用post方式 需要设置一下header的content

xhr.send(a)

...

 

  最后 ,在此特别感谢一下姜雅文同学的指导 写在此处 作为标记。

### 回答1: 在使用axios向后台数组作为参数时,可以使用get请求或post请求两种方法。 一、GET请求 通过get请求将数组作为参数递 例如: ``` // 示例数据 const data = [1, 2, 3, 4, 5]; // 将数据进行拼接 const params = data.join(','); // 发送GET请求 axios.get('/api', { params: { data: params } }).then(res => { console.log(res.data); }).catch(error => { console.log(error); }); ``` 在服务端中,可以通过req.query来获取递过来的参数,如下所示: ``` let data = req.query.data.split(","); console.log(data); // [ '1', '2', '3', '4', '5' ] ``` 二、POST请求 通过post请求将数组作为参数递 例如: ``` // 示例数据 const data = [1, 2, 3, 4, 5]; // 发送POST请求 axios.post('/api', { data: data }).then(res => { console.log(res.data); }).catch(error => { console.log(error); }); ``` 在服务端中,可以通过req.body来获取递过来的参数,如下所示: ``` let data = req.body.data; console.log(data); // [1, 2, 3, 4, 5] ``` 需要注意的是,如果后台使用的是Node.js原生http模块,需要在服务端设置Access-Control-Allow-Origin解决跨域问题。 ### 回答2: Axios作为一种常用的网络请求工具,可以方便地与后台进行交互,其中包括向后台数组作为参数数组最常见的场景是在进行批量操作时,通常需要将多个相似的数据一起递给后台进行处理,这种情况下,可以将数据封装成一个数组,并通过Axios将整个数组递给后台。 首先,在使用Axios发送请求时,需要设置请求的方式以及请求的地址和参数等信息。对于数组作为参数,可以通过以下的方式进行设置: ```javascript axios({ method: 'post', //请求方式,此处为post方法 url: '/api/user', //请求地址 data: { users: [ //将要递的数组 { name: '张三', age: 20 }, { name: '李四', age: 21 }, { name: '王五', age: 22 } ] } }) .then(function (response) { //接收后台返回的数据 console.log(response); }) .catch(function (error) { //处理异常情况 console.log(error); }); ``` 如上代码所示,我们可以通过data字段将数组封装成一个对象,然后递给后台。在数据递的过程中,可以通过相应的请求方式(比如post)将数据递给后台。 在后台接收这个数组对象时,需要进行相应的数据解析,比如将数组中的数据逐个插入数据库或者进行其他的处理,具体的实现也需要根据后台的具体需求进行调整。 综上,通过对Axios数组作为参数的方法进行了解和实践,可以轻松地将多个相似的数据一起递给后台进行处理,改善了网页交互效率,增加了用户的体验感。 ### 回答3: 在使用axios向后台数组作为参数时,可以通过以下方法进行处理: 1. 通过URL参数 在URL中参数是最基本也是最常见的方法,针对数组参数也可以使用这种方法。将参数数组转化为字符串,然后拼接在URL中进行递。例如,将[1,2,3]转化为"1,2,3",然后拼接到URL中:http://localhost:8080/api?ids=1,2,3。 2. 通过请求体参数 对于需要递复杂数组参数的情况,可以通过请求体进行递。首先需要设置请求头Content-Type为application/json,然后将参数数组进行序列化(例如使用JSON.stringify()方法),作为请求体递到后台处理。例如: ``` axios.post('/api', { data: JSON.stringify([1, 2, 3]) }, { headers: { 'Content-Type': 'application/json' } }) ``` 在后台接收请求时,需要对请求体进行解析。针对Node.js环境,可以使用bodyParser中间件对请求体进行解析,将JSON字符串转化为对象。 3. 通过formData参数 对于需要上文件或二进制数据的情况,可以通过formData参数。首先创建一个FormData对象,然后调用append()方法添加参数数组,最后将formData作为请求体递。例如: ``` const formData = new FormData() formData.append('ids', [1, 2, 3]) axios.post('/api', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) ``` 在后台接收请求时,需要对formData进行解析。针对Node.js环境,可以使用formidable模块对formData进行解析,将数组参数转化为数组对象。 无论是哪种方法,都需要保证前后台处理参数的方式一致,避免造成参数解析错误。同时,针对复杂数组参数,还需要对参数进行校验和转换,保证参数的正确性和完整性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值