vue axios get请求参数为json对象的 请求方法

最新推荐文章于 2023-10-19 14:56:21 发布
最新推荐文章于 2023-10-19 14:56:21 发布
阅读量1.1w 收藏 14
点赞数 6
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44279016/article/details/114843880
版权

1.首先get请求 +参数的语法为：

this.$axios.get(‘url’,{params:‘参数’})

2.参数提交到服务器解析后发现错误
在这里插入图片描述
// var curEntry = [{dev_id:170708,stdcode:“P”}];

可使用JSON.stringify(curEntry) 转换成json字符串

3.参数转换成json字符串后服务器还是报参数错误，原因在于get方式传参无法正常识别为对象 而是均视为字符串

解决方法：使用qs.stringify()

paramsSerializer:function(params){
return qs.stringify(params,{arrayFormat: ‘indices’})
}
在这里插入图片描述
点击参考地址

ZL_Roke
关注
  • 6
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 使用axios 数据请求第三方插件的使用教程详解
12-04
axios 基于http客户端的promise，面向浏览器和nodejs 特色 •浏览器端发起XMLHttpRequests请求 •node端发起http请求 •支持Promise API •监听请求和返回 •转化请求和返回 •取消请求 •自动转化json数据 •客户端支持抵御 安装 使用npm： $ npm i axiso 为了解决post默认使用的是x-www-from-urlencoded 去请求数据，导致请求参数无法传递到后台，所以还需要安装一个插件QS $ npm install qs 一个命令全部解决 $ npm install --save axios vue-axios qs
vue axios请求拦截实例代码
01-19
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： 从浏览器中创建 XMLHttpRequest 从 node.js 发出 http 请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止 CSRF/XSRF 下面代码给大家介绍vue axios 请求拦截，具体代码如下所示： import axios from 'axios';//引入axios依赖 import { Message } from 'element-ui'; import Cookie
vue axios同步请求解决方案
11-27
在vue项目里面，需要循环发送ajax请求，出现的问题就是循环结束，第一次服务器还没返回，导致数据处理错误，需要使用同步请求 解决方案 目前没有发现axios可以同步请求，所以只能使用jQuery，配置同步请求； $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式： beforeSend:function(xhr){
vue axios数据请求及vue中使用axios的方法
01-19
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征： ——————————————————————————– •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支持防止 CSRF/XSRF 在vue中数据请求需要先安装axios  npm i --save axios 我们在使用请求数据的页面导入axios import  axios from axios 然
vue axios post发送复杂对象问题
12-10
一、项目情形 现在vue项目中，一般使用axios发送请求去后台拉取数据。 在某些业务场景中，前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式（post/get等），但如果不做其他配置，post的数据其实也是拼在请求地址后面，而这种传输方式会有很多问题：一是可能数据丢失，二是get传送的数据长度有limit，如果需要保存大段的中文，会报错；三是数据不直观，复杂对象的格式会出现问题。 二、解决方案 怎么实现使用post方法时，能实现formData方式提交，而且整个请求数据格式能像queryString一样直观。 使用QS将数据序列化 //main.j
前端 axios 通过 get 请求发送 json 数据
黄彪博客
10-08 761
建议跟后端沟通，你把json拼在url后面，后端从url的queryString取值。或者使用post请求来传json数据。
vue axios get方法传json
zhang804633234的专栏
10-12 3479
var params = { current: 1, pageSize: 10 } this.$axios({ url: 'xxx', method: 'get', data: {searchParams: JSON.stringify(params)}, callback: (result) => { } }); ...
Vue请求传递参数
IT__learning的博客
03-03 1万+
一、get请求 get请求没有请求体，传递的参数是添加到url字符串的后面：url?name=value&name1=value1。 1、直接拼接 axios({ method: "get", url: "http://localhost:1111/01/zc?yhm=lhj&pwd=123", //参数拼接在url后面 }).then(function(resp){ console.log(resp.data) }) 参数附在url后面 携带的参数 2、params属性
get 请求参数是对象怎么办
搬运工
03-11 1万+
在开发中，我们知道 Restful 对查询的规范是使用 get 请求，而一个管理画面的查询条件是多个，那么就需要前台传给后台一个对象。 本篇文章介绍如何使用 get 请求传递对象。 前端传参 在前台不能使用 this.$axios.get ，而是需要使用 this.$axios.request ，使用方法如下。 this.$axios.request({ method: 'GET', url: '/person/getByConditions', params: ...
前端js向axios的get请求的body中添加json参数，深度解析
热门推荐
qq_37027534的博客
08-05 2万+
结论 先说结论：在浏览器环境下，基于xhr通信的axios的get请求中是无法在body中传参的。 注意：要达到以上比较绝对的结论，需要以下几个条件 1.处于浏览器环境中 2.后端必须是严格的从get请求中获取body中的参数 3.xhr通信的规范不会变动 4.axios库继续以xhr(即XMLHttpRequest)为底层进行通信 其实后两点很大概率不会发生变动，因此可以肯定此结论在长时间内都会适用，当然如果看了后面的详解，你会自然的扩展出：在浏览器环境下，get请求中是无法在body中传参
在vue-cli3中使用axios获取本地json操作
11-19
使用axios的get方法获取，不能用post，不然会报404 axios.get(`./china-main-city/100000.json`) .then((data) => { console.log(data) }) 补充知识：两个不同的路由，引入相同的组件 从不同的按钮进入到详情页...
在GET、POST请求中，常见的几种传参格式
最新发布
祈澈菇凉
10-19 1021
一般查询字符串是最常见和通用的传参方式，但某些情况下，使用RESTful风格的URL参数或参数数组或参数对象也是常见的做法。将参数直接作为URL的一部分，一般用于表示资源的唯一标识符或路径参数。在请求的数据体中使用多部分表单数据格式来传递参数，适用于文件上传等场景。在上述示例中，请求的数据体是一个 JSON 对象，通过设置请求头部的。将参数封装在一个对象中，然后将该对象作为查询字符串的值传递。参数值使用[]表示。在请求的数据体中使用 JSON 格式来传递参数。在请求的数据体中使用表单数据格式来传递参数。
vue json对象转数组_分享：vue使用技巧和项目中遇到的问题
weixin_39983384的博客
11-19 1495
这里给大家分享一下vue中的一些技巧，希望对大家有用处。(话不多说上代码)1，vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开，没有保存已输入的信息。)//在路由组件中：mounted(){},beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单，或者自动后台为其保存 }else{ next(true);/...
VUE 项目中对象与JSON格式字符串之间的转换
weixin_44545895的博客
06-30 4142
vue
get请求，参数值为json字符串如何传值
qq_43842093的博客
04-01 2394
例如:http://localhost:8080/test?content=json字符串，json字符串为{“name”:“xzp”}，因为{}在url会被转义，{要改为%7b，}要改为%7d，最终的效果是： http://localhost:8080/test?content=%7b"name":"xzp"%7d
js前端get请求携带对象参数
qq_31794615的博客
08-15 3237
js前端get请求携带对象参数
java以get方式请求第三方接口传参json字符串
weixin_44882521的博客
04-28 3244
在java后端请求第三分api，用get请求参数用json对象传递
vue用query传对象_vue params、query传参使用详解
weixin_39612332的博客
12-20 485
最近在学习vue，本文介绍了vue params、query传参使用，分享给大家，也给自己留个笔记声明式：编程式：router.push(...)这两种方式 都可以实现跳转链接，在上篇文章继续，通过a组件跳转链接到b组件并且传参数。1、router.push使用router/index.jsexport default new router({routes: [{path: '/',name: '...
Vue路由传参,刷新页面，参数变成[Object object]
codezha的博客
07-22 1万+
通常我们需要通过路由携带需要传递的参数，有以下三种写法： 1、地址后面直接带查询参 如果我们只需要传递一个简单的参数，可以采取这种写法，在路由配置中配置查询参，路由跳转时添加查询参 配置如下： { path: '/test/:id', name: 'test', component: Test } 跳转如下： this.$router.push({ path: `/test/${id}` }) 接收参数： this.$route.params.id 2、params传参 this.$r
vue axios发送post请求并携带json参数例子
04-23
当然，我可以为您提供一个例子。 下面是使用Vue和Axios发送POST请求并携带JSON参数的示例代码： ```javascript //导入Vue和Axios import Vue from 'vue' import axios from 'axios' //设置Axios的全局配置 axios.defaults.baseURL = 'http://localhost:3000/api' axios.defaults.headers.post['Content-Type'] = 'application/json' //创建Vue实例 new Vue({ el: '#app', data: { name: '', email: '' }, methods: { submitForm() { const data = { name: this.name, email: this.email } //发送POST请求 axios.post('/user', data) .then(response => { console.log(response) }) .catch(error => { console.log(error) }) } } }) ``` 这里我们设置Axios的全局配置，以便使用JSON格式的数据来发送POST请求。然后我们在Vue实例中定义了一个submitForm方法，并将输入框中的数据封装在一个data对象中。最后，我们将data对象传递给Axios的post方法，让它发送POST请求。如果请求成功，我们将打印出响应的内容，如果失败，我们将打印出错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值