标签：插件 VUE name age ajax result data id 请求
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/axios.min.js"></script>
<script src="./lib/vue-resource-1.3.4.js"></script>
<style>
</style>
</head>
<body>
<!--
vuejs本身是不支持发送ajax的，需要使用插件来实现
vue-resource、axios插件
axios的形式是一个基于Promise的HTTP请求客户端，用来发出请求，该形式是vue2.0官方推荐的形式，官方在推出了该形式后，同时就不再对之前的vue-resource的形式进行更新和维护了。所以更推荐的是使用axios的形式来处理ajax请求
-->
<div id="app">
<p id="msg">{{str1}}</p>
请输入信息：<input type="text" v-model="str1">
<br>
<br>
<button @click="getStudent">点击获取学生信息</button>
<br>
<br>
编号：<span>{{id}}</span>
<br>
姓名：<span>{{name}}</span>
<br>
年龄：<span>{{age}}</span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
str1:"aaa",
id:"",
name:"",
age:"",
},
methods:{
//1.vue-resource插件实现get和post请求
getStudent(){
//发出ajax请求获取学生信息，在页面中局部刷新学生信息
// this.$http.get("请求路径"，请求参数，then(回调函数));
//对于参数的传递，get请求和post请求的参数传递的语法是不同的，这一点有别于其他的前端语言
//对于get请求，必须是再路径的后买你拼接url?key1=value1&key2=value2
this.$http.get("getStudent?name=张三").then(function(data){
//通过data.body的形式拿到服务器返回成功的数据
console.log(data.body.id);
this.id=data.body.id;
this.name=data.body.name;
this.age=data.body.age;
});
//post请求参数传递的方式，是以请求体的方式来传递的，所以不能将参数挂在url后面
//手动发起的post请求，默认没有表单格式，所以有些服务器就处理不了
//我们需要通过post方法的第三个参数，{emulateJSON:true}设置，提交的内容类型就设置为了普通表单的格式传递参数
this.$http.post("updateStudent",{"name":"李四"},{emulateJSON:true}).then(function(data){
//通过data.body的形式拿到服务器返回成功的数据
console.log(data.body.id);
this.id=data.body.id;
this.name=data.body.name;
this.age=data.body.age;
});
},
//2.通过axios插件实现get和post请求
getStudentAxios(){
//在请求执行成功过以后，执行回调函数中的内容，回调函数处于其他函数的内部。this不会与任何的对象绑定(以this.id的形式拿不到data中定义的值了)
//将指向vue对象的this赋值给外部方法定义的属性，然后在北部方法中使用该属即可
var _this=this;
axios({
method:"get",
url:"getStudent"
}).then(function(result){
//axios对于返回值的处理，返回值.data进行取值
console.log(result);
var data = result.data;
_this.id=data.id;
_this.name=data.name;
_this.age=data.age;
});
//如果不给this进行赋值，可以通过箭头表达式替代原有的function做回调函数
axios({
method:"get",
//可以通过拼接的方式传递参数
url:"getStudent?name=张三",
//也可以通过param属性的形式来传递参数，post也可以通过这种方式传递参数
params:{"name","张三"}
}).then(result=>{
//axios对于返回值的处理，返回值.data进行取值
console.log(result);
var data = result.data;
this.id=data.id;
this.name=data.name;
this.age=data.age;
});
//axios的另一种发送请求的形式
axios.get(
"getStudent",//请求路径
//请求参数
{
params:{
"name":"张三"
}
}
).then(result=>{
var data = result.data;
this.id=data.id;
this.name=data.name;
this.age=data.age;
});
axios.post(
"getStudent",//请求路径
//请求参数,该方法发送数据是一个request payload的数据格式，一般的数据格式都是form data格式，所以我们之前写的以json形式的参数就发送不出去
//只能通过传统字符串的方式向后台发送参数
"name=abc"
).then(result=>{
var data = result.data;
this.id=data.id;
this.name=data.name;
this.age=data.age;
})
}
},
})
</script>
</body>
</html>
标签：插件,VUE,name,age,ajax,result,data,id,请求 来源： https://www.cnblogs.com/gfl-1112/p/16539361.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。