axios发送post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios</title>
</head>
<body>
<div id="app"></div>
<script type= "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
var App = {
data(){
return{
msg:''
}
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<h3>{{msg}}</h3>
<button @click='sendAjaxByPost'>发Post请求</button>
<h3>{{msg}}</h3>
</div>
`,
methods:{
sendAjax(){
axios.get('http://127.0.0.1:8081/create')
.then(res=>{
console.log('这是成功',res);
console.log('这是成功res.data',res.data)
console.log('这是typeof',typeof res.data)
this.msg = res.data;
// this.msg = '你好啊';
})
.catch(err=>{
console.log('这是错误',err)
})
},
sendAjaxByPost(){
// var params = new URLSearchParams() ;
// params.append('name','alex');
axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
then( function(res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
}
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App
},
template:'<App/>'
})
</script>
</body>
</html >
会报错
post请求,发送数据会报错,不能直接携带数据,要加URLSearchParams处理下才行
var params = new URLSearchParams() ;
params.append('name','alex');
修改之后
sendAjaxByPost(){
var params = new URLSearchParams() ;
params.append('name','alex');
axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
then( function(res) {
console.log(res);
}).catch(err=>{
console.log(err);
})
}
由于axios在整个项目中是局部作用域,避免多次重复导入axios模块,可以用vue和它绑定一起
1,//方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
2,var _this = this // //解决this指向问题方法二
<!-- vue和axios都是全局的对象未来axios会成为局部作用域-->
<script type="text/javascript">
//挂载Vue.prototype.$axios = axios;使用插件
Vue.prototype.$axios = axios;
//配置公共的ur1
axios.defaults.baseURL = 'http://127.0.0.1:8800';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>axios</title>
</head>
<body>
<div id="app"></div>
<script type= "text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<!-- vue和axios都是全局的对象,未来axios会成为局部作用域-->
<script type="text/javascript">
//挂载Vue.prototype.$axios = axios;使用插件
Vue.prototype.$axios = axios;
//配置公共的ur1
axios.defaults.baseURL = 'http://127.0.0.1:8800';
var App = {
data(){
return{
msg:''
}
},
template:`
<div>
<button @click='sendAjax'>发Get请求</button>
<h3>{{msg}}</h3>
<button @click='sendAjaxByPost'>发Post请求</button>
</div>
`,
methods:{
sendAjax(){//方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
axios.get('http://127.0.0.1:8081/create')
// this.$axios.get('http://127.0.0.1:8081/create') // 挂载之后使用this.$axios
// .then(res=>{ //方式1: 解决this的指向问题,在vue中用函数建议使用箭头函数
.then(function(res){ // 传统函数function(res) this变成了windows对象了 , 初学者容易犯的错
console.log('这是成功',res);
console.log('这是成功res.data',res.data)
console.log('这是typeof',typeof res.data)
console.log('这是this',this) // 传统函数function(res) this变成了windows对象了
// 传统函数function(res) this变成了windows对象了, 初学者容易犯的错 解决this指向问题
this.msg = res.data;
// this.msg = '你好啊';
})
.catch(err=>{
console.log('这是错误',err)
})
},
sendAjaxByPost(){
var _this = this // //解决this指向问题方法二
var params = new URLSearchParams() ;
params.append('name','alex');
// axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
this.$axios.post('http://127.0.0.1:8800/create',{"name":"alex"}).
then( function(res) { // 传统函数function(res) this变成了windows对象了
console.log(res);
_this.msg = res.data; //解决this指向问题方法二
}).catch(err=>{
console.log(err);
})
}
}
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
App
},
template:'<App/>'
})
</script>
</body>
</html >
写入自己的博客中才能记得长久
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）