技术文章
当前位置:首页 > vue.js技术文章 > vue中post请求以a=a&b=b的格式写遇到的问题

vue中post请求以a=a&b=b的格式问题整理

  • 发布时间:
  • 作者:码农之家原创
  • 点击:98

这篇文章主要知识点是关于vue、post、请求、解决vue中post方式提交数据后台无法接收的问题 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF出版:清华大学出版社作者:王松
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

vue中post请求以a=a&b=b的格式写遇到的问题

vue开发过程中,总会碰到一些问题,当然任何问题都不能阻止我们前进的脚步,话不多说,下面是我在开发过程中请求参数所碰到的问题

1,在暂时没有后台数据的时候,post请求的参数大多会以   name:a,age:b   的格式去写

import axios from 'axios';
axios.post(url,{
    name:'0',age:''
    },{emulateJSON: true}, {  // 这里是跨域写法
    headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}  // 这里是跨域的写法
    }).then(reponse=>{
     console.log(reponse)
      this.tableData=reponse.data.data
    })

这样写法是没有问题的,

2,若是后台已经写好,但post的请求要以   name:a&age:b   的方式去写的话,上面你的写法就会请求不到数据,这时我们就要使用一个插件来解决这个问题

2.1,安装qs

 npm install --save axios vue-axios qs

2.2,在请求的页面加入

    import qs from 'qs';
     import axios from 'axios';
axios.post(url,qs.stringify({  // 通过qs.stringify()将对象解析成URL的形式
    name:'0', age:'2'
    }),{emulateJSON: true},{
    headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
    }).then(reponse=>{
     console.log(reponse)
     this.tableData=reponse.data.data
    })

总结

以上所述是小编给大家介绍的vue中post请求以a=a&b=b 的格式写遇到的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

解决vue中post方式提交数据后台无法接收的问题

最近用vue做项目,遇到ajax提交值的问题。

用post方式提交,后台无法接收到值。百度了半天,各种解决方式都有,下载中间件之类的,都试了。

最后咨询大牛才知道是数据没有序列化的问题。

下面是源码:

解决vue中post方式提交数据后台无法接收的问题

因为我没有使用箭头函数,所以需要在外面重新定义this,这样不太好,因为有时忘了的话就很尴尬了。

不过不知道为什么,我之前用 JSON.stringify( ) 完全没有效果。

改成 :

var qs = require('querystring')

qs.stringify(data)

就ok了。

以上这篇(标题)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到Vue2.0利用 v-model 实现组件、 vue-cli开发时ajax跨域的方法、 elementUI table表格动态合并、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue8个版本的区别总结

下一篇:vue实现下拉列表功能的你具体代码

展开 +

收起 -

相关电子书
学习笔记
网友NO.311761

vue axios post发送复杂对象问题

一、项目情形 现在vue项目中,一般使用axios发送请求去后台拉取数据。 在某些业务场景中,前端需要在某个字段中发送一个复杂的嵌套对象给后台做保存并处理。虽然axios可配置发送方式(post/get等),但如果不做其他配置,post的数据其实也是拼在请求地址后面,而这种传输方式会有很多问题:一是可能数据丢失,二是get传送的数据长度有limit,如果需要保存大段的中文,会报错;三是数据不直观,复杂对象的格式会出现问题。 二、解决方案 怎么实现使用post方法时,能实现formData方式提交,而且整个请求数据格式能像queryString一样直观。 使用QS将数据序列化 //main.jsimport axios from 'axios';Vue.prototype.$axios = axios; // 配置axios的访问方式//demo.vueimport Qs from qs;this.$axios({ method: "post", url: "url", data: reqData, transformRequest: [ function(data){ return Qs.stringify(data) //使用Qs将请……

网友NO.661910

vue发送websocket请求和http post请求的实例代码

先给大家介绍下vue发送websocket请求和http post请求 直接上代码: pdf.vue script import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs" export default { name: "pdf", data() { return { newsData: [], tagGuid_mx: "", tagGuid_4AA_Ia: "", tagGuid_4AA_P: "", tagGuid_4AA_Q: "", 49 tagGuid_1AA_6_Ib: "", tagGuid_1AA_6_Ic: "", tagGuid_pdfwd: "", tagGuid_pdfsd: "", stompClient: '', timer: '', visibilityHeZha: "hidden", visibilityFenZha: "hidden", hezhaData:[] } }, methods: { initWebSocket() { this.connection(); let that = this; // 断开重连机制,尝试发送消息,捕获异常发生时重连 this.timer = setInterval(() = { try { that.stompClient.send("test"); } catch(err) { console.log("断线了: " + err); that.connection(); } }, 5000); }, connection() { // 建立连接对象 let socket = new SockJS('http://XXX.XX.XX.XXX:8081/energy-system-websocket'); // 获取STOMP子协议的客户端对象 this.stompClient = Stomp.over(socket); // 定义客户……

网友NO.536572

vue基础之使用get、post、jsonp实现交互功能示例

本文实例讲述了vue基础之使用get、post、jsonp实现交互功能。分享给大家供大家参考,具体如下: 一、如果vue想做交互,引入: vue-resouce 二、get方式 1、get获取一个普通文本数据: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title/title style /style script src="vue.js"/script script src="vue-resource.js"/script script window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('a.txt').then(function(res){ alert(res.status);//成功 alert(res.data); },function(res){ alert(res.status);//失败返回 alert(res.data); }); } } }); }; /script/headbody input type="button" value="按钮" @click="get()"/body/html 2、get给服务发送数据: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title/title style /style script src="vue.js"/script script src="vue-resource.js"/script script window.onload=function(){ new Vue({ el:'body', data:{ }, methods:{ get:function(){ this.$http.get('get.php',{ a:……

网友NO.222524

vue中axios的封装问题(简易版拦截,get,post)

第一步还是先下载axios npm install axios --save 第二步/src/utils/目录下建立一个htttp.js import axios from 'axios';axios.defaults.timeout = 5000;axios.defaults.baseURL ='';//http request 拦截器axios.interceptors.request.use( config = { // const token = getCookie('名称'); config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/x-www-form-urlencoded' } // if(token){ // config.params = {'token':token} // } return config; }, error = { return Promise.reject(err); });//http response 拦截器axios.interceptors.response.use( response = { if(response.data.errCode ==2){ router.push({ path:"/login", querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转 }) } return response; }, error = { return Promise.reject(error) })/** * 封装get方法 * @param url * @param data * @returns {Promise} */export function fetch(url,params={}){ return new Promise((resolve,reject) = { axios.get(url,{ params:params }) .then(response = { resolve(re……

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息