Vue通过axios发送ajax请求
2023-06-13 09:12:14 时间
在Vue中是不支持发送ajax请求的,如果我们要在Vue中发送ajax请求,我们需借助第三方插件 常用发送ajax请求插件有两个 vue-resource和axios,Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
1.axios gitub 引入方式
- npm方式: npm install axios Using bower:
- bower方式 bower install axios Using yarn:
- yarn方式 yarn add axios
- CDN方式
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
基本使用 发送简单get请求
//1.php
<?php
echo 123;
//html
<div id='app'>
<input type="button" @click='get' value='get' name="">
<input type="button" @click='post' value='post' name="">
<input type="button" @click='jsonp' value='jsonp' name="">
</div>
//js
<script type="text/javascript">
var vm = new Vue({
el:'#app',
methods:{
get(){
axios.get('1.php').then(res=>{
console.log(res);
})
}
}
})
</script>
then后面的匿名函数为请求成功的回调函数 打印结果如下
get传参 1.直接写在url后面
var vm = new Vue({
el:'#app',
methods:{
get(){
axios.get('1.php?id=1&name="测试"').then(res=>{
console.log(res);
})
}
}
})
2.通过params参数
var vm = new Vue({
el:'#app',
methods:{
get(){
axios.get('1.php',{params:{
id:1,
name:'测试'
}}).then(res=>{
console.log(res);
})
}
}
})
2.post请求
axios({
method: 'post',
url: '1.php',
params: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
}).then(function(res){
console.log(res)
})
注意:直接使用axiox发送post请求时,会使后端接收不到数据
解决方法如下
一, 在发送post请求时我们要手动设置请求头 Content-Type:application/x-www-form-urlencoded
并且我们将传递参数的属性data换成了params,使用data发送数据,后端接收不到
二,使用data发送数据时,我们可以在数据发送之前进行数据转换转换为key=value&key2=value2....的形式
axios({
url: '1.php',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
//数据转换
transformRequest:[data=>{
let res = ''
for (let item in data){
res +=item + "="+data[item]+"&";
}
return res;
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(res){
console.log(res)
})
需要注意的是如果要在vue2.0中使用axios,需要这样引入
cnpm i axios vue-axios -S
//index.js import Axios from ‘axios’ import VueAxios from ‘vue-axios’
Vue.use(VueAxios,Axios);
```
后面的使用方法与上面一致
相关文章
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- Vue通过axios发送ajax请求
- webpack搭建基础vue项目
- vue ajax 修改初始化赋值
- Vue(27)vue-codemirror实现在线代码编译器「建议收藏」
- vue项目中使用postcss-px2rem的方法总结「建议收藏」
- vue-cli 初始----安装运行Vue项目
- 彻底明白vue双向绑定底层原理(源码分析)
- vue源码分析-从new Vue开始
- 最新版后台前端管理系统框架: vue-admin-work-p
- vue分页的设置_vue视频切换过渡
- Vue分页导航_vue分页组件
- vue父子组件传值props_vue子组件调用父组件的方法并传参
- vue基础语法
- vue组件 - 监听APP手势滑动
- vue在IE下无法正常工作,Promise未定义?
- Vue + SpreadJS 实现高性能数据展示与分析
- 由浅入深读透vue源码:diff算法
- js ajax 设置代理ip(vue Ajax 设置 代理ip)
- Vue框架下的Redis调用实战(vue调用redis)
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- Vue结合Redis实现性能优化(vue引入redis)
- ajax页面无刷新IE下遭遇Ajax缓存导致数据不更新的问题