让axios发送表单请求形式的键值对post数据的实例

想要发送键值对，其实是需要做响应处理的，直接上代码

npm install --save axios vue-axios qs

qs是必不可少的插件，安装完成后，在main.js插入一下代码

//载入axios
import Qs from 'qs'
import axios from 'axios'
import VueAxios from 'vue-axios'
var axios_instance = axios.create({
 baseURL:'http://localhost',
 transformRequest: [function (data) {
  data = Qs.stringify(data);
  return data;
 }],
 headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
Vue.use(VueAxios, axios_instance)

这样就大功告成了，在vue模块中可以这样使用

this.$http.post('url', {
  id:1
}).then(response => {
  console.log(response)
}).catch( error => {
  console.log(error);
});

可以看到，在好用参数的时候也不需要增加params这个key了。直接传递参数对象即可，很方便！

以上这篇让axios发送表单请求形式的键值对post数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在vue中通过axios异步使用echarts的方法

    在vue中通过axios异步使用echarts的方法

    现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据. 一. 实现异步加载数据 (一)引入vue-resource 通过npm下载axios //命令行中输入 npm install axios --save 在main.js中引入axios并注册 // main.js

  • axios异步提交表单数据的几种方法

    踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSecurity,使用postman测试后端的权限接口时发现都正常,但是使用vue+axios发送异步的请求后端一直获取不出axios提交的form表单的数据,爬坑两个半钟头找到了答案 axios用post异步形式提交的数据和我们直接使用from表单提交的数据的格式(Form Data格式)是不一样的,在下面列举 默认格式Request Payload 直接使用axios发送异步请

  • vuejs使用axios异步访问时用get和post的实例讲解

    script中. let data={....}; let url=xx; 方法各异: GET: this.$ajax.get(url,{ params:data }) .then(function (res) { console.log(res.data) }) .catch(function (error) { console.log(error) }) POST: 方法一:1. //请求后台数据之前转换入参 let url = xx; let data = { uname:this.una

  • vue axios 表单提交上传图片的实例

    项目中用的element 的框架,然后在项目有一个添加数据需求是图片可上传,也可不上传, 然后问题就是element 中的上传控件在没有图片的时候是不会触发提交的,但接口写的是有file的  multipart/form-data    接收模式 所有只能自己另个模仿一个表单上传 <input class="file" name="file" type="file" accept="image/png,image/gif,imag

  • 解决vue跨域axios异步通信问题

    在项目中,常常需要从后端获取数据内容.特别是在前后端分离的时候,前端进行了工程化部署,跨域请求成了一个前端必备的技能点.好在解决方案很多. 在vue中,在开发中,当前使用较多的是axios进行跨域请求数据,但不少人遇到如下问题: •异步通信,无法同步执行 •无法集中管理 •不便阅读 •还未请求成功就调转了 •then里面的逻辑越来越繁杂 以往的网络请求的写法如下: // main.js // 引入axios import axios from 'axios' Vue.prototype.$axi

  • vue异步axios获取的数据渲染到页面的方法

    我们在vue,数据很多事异步获取来的,如果在template直接使用,会报错,undefined. 因为先渲染后得到的数据,那如何才能不报错呢? computed!!! 举个例子 index.vue 忽略坑人的传参方式... created(){ this.init() this.axios.post('/wanwei/appserver/eqInfo/eqBaseInfo?reqjson={"eq_code":"BJTE1W03011SF001SBQDGPXTGYKG001

  • axios发送post请求,提交图片类型表单数据方法

    DOME <input type="file" @change="upload" ref="upload"> 接口 const userUploadAtt = (File,config) => axios.post("接口",File,config) 处理数据 let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData(); 使

  • Vue axios 中提交表单数据(含上传文件)

    我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作. 当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢? <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport

  • 让axios发送表单请求形式的键值对post数据的实例

    想要发送键值对,其实是需要做响应处理的,直接上代码 npm install --save axios vue-axios qs qs是必不可少的插件,安装完成后,在main.js插入一下代码 //载入axios import Qs from 'qs' import axios from 'axios' import VueAxios from 'vue-axios' var axios_instance = axios.create({ baseURL:'http://localhost', t

  • layui点击弹框页面 表单请求的方法

    如下所示: $("#addSite").click(function () { layer.open({ title: '添加站点', type: 1, area: ['700px', '400px'], content: '<blockquote class="layui-elem-quote layui-text">注意事项: 请填写相关的数据信息! </blockquote>' + '<form class="layui

  • PHP实现chrome表单请求数据转换为接口使用的json数据

    为什么要写转换程序 最近在做旧版程序迁移,旧的架构为常规的MVC模式,新版架构全部改成restful架构. 由于改版数据是一致的,但是请求结构不一致,新版的请求全部以json形式提交,为了方便测试,之前一直都是直接在浏览器打开开发者工具,然后把请求内容复制过来,然后手动改成json形式,由于之前数据量比较少,暂时未发现测试时候不方便的情况,但是今天遇到了数据比较多的情况,于是我想,为啥不写一段转换程序呢? 本身来说,程序的初衷应该是提高工作效率,这也是我之前缺少反思的地方,因此写下这篇文章做个记

  • php表单请求获得数据求和示例

    获得表单请求的值: 案例: request.php 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8;" /> <title>计算请求</title> </head> <body> <form action="result.php"

  • js 提交form表单和设置form表单请求路径的实现方法

    如下所示: form表单ID:postform 设置表单请求url document.postform.action = "SaveReturnInfo"; 提交form表单 document.getElementById("postform").submit(); 以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了,希望大家多多支持我们~

  • 使用Python爬虫库requests发送表单数据和JSON数据

    导入Python爬虫库Requests import requests 一.发送表单数据 要发送表单数据,只需要将一个字典传递给参数data payload = {'key1': 'value1', 'key2': 'value2'} r = requests.post("http://httpbin.org/post", data=payload) print(r.text) {"args":{},"data":"",&qu

  • 动态设置form表单的action属性的值的简单方法

    用jQuery时,可如下设置: form表单: <form name="myform" id="myform" action="ssss" method="post" onsubmit="getUrl();"> javascript方法: <script type="text/javascript"> function getUrl(){ $('form').at

  • 用JS动态改变表单form里的action值属性的两种方法

    方法1: <form id="form1" name="form1" method="post" action="../news/index.asp"> <table width="100%" height="43" border="0" cellpadding="0" cellspacing="0">

  • vue表单验证rules及validator验证器的使用方法实例

    vue表单验证rules及validator验证器的使用方法实例

    目录 前言 表单验证rules 自定义校验规则 总结 前言 为防止用户犯错,尽可能更早地发现并纠正错误. Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 注意:prop对应表单域 model 字段,使用 validate方法时,该属性是必填的. 表单验证rules 以官网给出的例子分析来看 将prop 属性设置为需校验的字段名. 在data里配置要校验字段和校验规则

  • JSP之表单提交get和post的区别详解及实例

    JSP之表单提交get和post的区别详解及实例

    JSP之表单提交get和post的详解及实例 一 get和post的区别 二 实战(post方式提交) 1.login.jsp <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %> <% String path = request.getContextPath(); String basePath = req

随机推荐