网站首页 > 编程文章 正文
内容导读
但是确实很怪异的行为就是，我明明按照官网的api写的，居然没有获取到name和age，通过查找资料得知，这种方式传递的数据是Request Payload。上面都是在没有跨域的情况下进行ajax请求的，如果我们要跨域请求呢？
vue
vue.js与ajax
vue本身是不支持发送ajax请求，需要通过其他库来实现的（比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios），或者也可以使用jquery来发送ajax请求
本文仅做一个自己的参考...使用axios发送ajax请求
vue2.0版本已经不推荐vue-resurce了，官方推荐axios来发送，首先要先了解的是axios是一个基于Promise的HTTP请求客户端，用来发送请求。
关于Promise的知识，这里不再详细讲解啦。推荐可以去看下阮一峰老师的书《ECMAScript 6 入门》去进行了解。
步骤
1.安装axios，我们先去github，搜索axios
image.png
官方文档下有非常详细的API,这里我们就通过直接引入的方式来使用。
通过get方法请求
get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<title>发送get请求</title>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
users:{
name:'',
age:''
}
},
methods:{
//axios.get的发送参数有两种，两个ajax请求函数都可实现
sendGetByStr(){
//1.get通过直接发字符串拼接
axios.get(`get.php?name=${this.users.name}&age=${this.users.name}`)
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
},
sendGetByObj(){
//2.get通过params选项
axios.get(`get.php?`,{
params:{
name:this.users.name,
age:this.users.age
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
}
}
});
}
</script>
</head>
<body>
<div id="app">
<input type="text" :name="users.name" v-model="users.name" placeholder="姓名">
<input type="text" :age="users.age" v-model="users.age" placeholder="年龄">
<button @click="sendGetByStr">发送get请求</button>
</div>
</body>
</html>界面效果如图，我就偷懒不写样式了...
image.png
写个最简单的php响应后输出 get.php
<?php $name=$_GET["name"]; $age=$_GET["age"]; echo "姓名：".$name.","."年龄：".$age； ?>
输入名字和年龄，就直接请求并输入数据了
image.png
image.png
通过post请求
同样post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<title>发送post请求</title>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
users:{
name:'',
age:''
}
},
methods:{
sendPsot(){
axios.post('post.php', {
name: this.users.name,
age: this.users.age,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
});
}
</script>
</head>
<body>
<div id="app">
<input type="text" :name="users.name" v-model="users.name" placeholder="姓名">
<input type="text" :age="users.age" v-model="users.age" placeholder="年龄">
<button @click="sendPsot">发送get请求</button>
</div>
</body>
</html>同样post.php
<?php $name=$_POST["name"]; $age=$_POST["age"]; echo "姓名：".$name.","."年龄：".$age ?>
image.png
image.png
但是确实很怪异的行为就是，我明明按照官网的api写的，居然没有获取到name和age，通过查找资料得知，这种方式传递的数据是Request Payload。所以需要做些小处理，当然啦，个人观点，这也是官方文档还没更新解决的一些小问题吧
image.png
还好，官方文档提供了一个参数可以对传递参数进行转换，具体如下
post.html改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<title>发送post请求</title>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
users:{
name:'',
age:''
}
},
methods:{
sendPsot(){
axios.post('post.php',this.users,{
//transformRequest就是用来处理转换的
transformRequest:[
function(data)=>{
let transObj='';
for(let i in data){
transObj+=i+'='+data[i]+'&';
}
return transObj;
}
]
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
}
}
});
}
</script>
</head>
<body>
<div id="app">
<input type="text" :name="users.name" v-model="users.name" placeholder="姓名">
<input type="text" :age="users.age" v-model="users.age" placeholder="年龄">
<button @click="sendPsot">发送get请求</button>
</div>
</body>
</html>image.png
image.png
上面都是在没有跨域的情况下进行ajax请求的，如果我们要跨域请求呢？
跨域请求的话axios还没有解决方案，当时，可以通过vue-resource的jonsp来实现，vue-resource虽然在vue2.0版本官方不推荐，但是也是可以用的，具体看项目需求了
使用vue-resource跨域请求的一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.min.js"></script>
<script src="js/vue-resource.min.js"></script>
<title>输入用户名获取github上的账户信息</title>
<script>
window.onload=function(){
new Vue({
el:'#app',
data:{
id:'',
userData:''
},
methods:{
getData(){
this.$http.jsonp(`https://api.github.com/users/${this.id}`).then(function(resp){
this.userData=resp.data.data;
});
}
}
});
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="id" placeholder="姓名">
<button @click="getData">获取github的账户信息</button>
<div v-for="(v,k) in userData">{{k}}:{{v}}</div>
</div>
</body>
</html>image.png
典型的跨域请求例子输入姓名即可查询在github上面的信息。
有需要的可以去下载源码
欢迎访问我的个人网站zhengyepan.com
欢迎讨论交流~
猜你喜欢
- 2024-09-11 第39章 Django调用验证码（调用验证码接口）
- 2024-09-11 第6章 Vue组件高级（vue组件用法）
- 2024-09-11 【JavaScript】ES6之Promise用法详解及其应用
- 2024-09-11 前后端分离 Vue + Springboot 实现用户列表单页面开发(建议收藏)
- 2024-09-11 在 JS 中如何使用 Ajax 来进行请求
- 2024-09-11 express框架开发开始篇 方便以后写项目时候可拿过来直接使用
- 2024-09-11 Spring Cloud Alibaba 之 Gateway 服务网关跨域问题
- 2024-09-11 SpringBoot+Vue+Flowable，模拟一个请假审批流程
- 2024-09-11 Vue基础(2)（vue基础笔试题）
- 2024-09-11 vue.js快速入门（vue.js入门教程）
欢迎 你 发表评论:
- 最近发表
- 标签列表
-
- spire.doc (59)
- system.data.oracleclient (61)
- 按键小精灵源码提取 (66)
- pyqt5designer教程 (65)
- 联想刷bios工具 (66)
- c#源码 (64)
- graphics.h头文件 (62)
- mysqldump下载 (66)
- sqljdbc4.jar下载 (56)
- libmp3lame (60)
- maven3.3.9 (63)
- 二调符号库 (57)
- 苹果ios字体下载 (56)
- git.exe下载 (68)
- diskgenius_winpe (72)
- pythoncrc16 (57)
- solidworks宏文件下载 (59)
- qt帮助文档中文版 (73)
- satacontroller (66)
- hgcad (64)
- bootimg.exe (69)
- android-gif-drawable (62)
- axure9元件库免费下载 (57)
- libmysqlclient.so.18 (58)
- springbootdemo (64)
本文暂时没有评论，来添加一个吧(●'◡'●)