Vue之两种插件处理ajax请求
一 axios插件处理ajax请求(推荐)
1 方式一处理get和post请求
- 语法
get语法一:
axios({
method : "get", //请求方式
url : "请求路径?参数" //请求路径,如果带参数则 ?参数
}).then(function (result) {});
get语法二:ES6语法
axios({
method : "get", //请求方式
url : "请求路径?参数" //请求路径,如果带参数则 ?参数
}).then(result => {});
axios({
method : "post, //请求方式
url : "请求路径" //请求路径,参数方式一
params:{"":""....} //参数方式二
}).then(function(result){});
post语法二:ES6语法
axios({
method : "post, //请求方式
url : "请求路径" //请求路径
params:{"":""....} //参数方式
}).then(result => {});
- jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>mytitle</title>
<!--
导入axios插件来实现ajax请求
-->
<script src="vue/vue-2.4.0.js"></script>
<script src="vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getStudent">点击取得学生信息</button>
<br/>
<br/>
编号:<span>{{id}}</span><br/>
姓名:<span>{{name}}</span><br/>
年龄:<span>{{age}}</span><br/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"id" : "",
"name" : "",
"age" : ""
},
methods : {
getStudent(){
/*
在请求执行成功后,执行回调函数中的内容,回调函数处于其他函数的内部,this不会与任何的对象绑定(以this.data的形式引入数据就引不到了)
将指向vue对象的this赋值给外部方法定义的属性,然后在内部方法中使用该属性即可
*/
var _this = this;
axios({
method : "get", //请求方式
url : "myServlet03.do" //请求路径
}).then(function (result) {
/!*
注意:
之前使用vue-resource插件 对于值的处理 返回值.body的操作
这次使用axios插件,同样需要对值进行处理 返回值.data的形式
*!/
//alert(result.data.id);
data = result.data;
_this.id = data.id;
_this.name = data.name;
_this.age = data.age;
})
axios({
method : "get", //请求方式
url : "myServlet03.do?name=aaa" //请求路径
//使用 箭头表达式=> 在代替原有的function来做回调函数
}).then(result=> {
/!*
注意:
之前使用vue-resource插件 对于值的处理 返回值.body的操作
这次使用axios插件,同样需要对值进行处理 返回值.data的形式
*!/
//alert(result.data.id);
data = result.data;
this.id = data.id;
this.name = data.name;
this.age = data.age;
})
//以param属性的形式来传递参数
axios({
method : "post", //请求方式
url : "myServlet03.do", //请求路径
params : {"name":"bbb"} //传递参数
//使用 箭头表达式=> 在代替原有的function来做回调函数
}).then(result=> {
/*
注意:
之前使用vue-resource插件 对于值的处理 返回值.body的操作
这次使用axios插件,同样需要对值进行处理 返回值.data的形式
*/
//alert(result.data.id);
data = result.data;
this.id = data.id;
this.name = data.name;
this.age = data.age;
})
}
}
})
</script>
</body>
</html>
2 方式二处理get和post请求
- 语法
get请求:
axios.get(
"请求路径", //请求路径
{
params : {
"name" : "aaabbb"
}
} //请求参数
).then(result=>{});
post请求:
axios.post(
"请求路径", //请求路径
"参数一":"值"//请求参数
).then(result=>{});
- jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>mytitle</title>
<!--
导入axios插件来实现ajax请求
-->
<script src="vue/vue-2.4.0.js"></script>
<script src="vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getStudent">点击取得学生信息</button>
<br/>
<br/>
编号:<span>{{id}}</span><br/>
姓名:<span>{{name}}</span><br/>
年龄:<span>{{age}}</span><br/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"id" : "",
"name" : "",
"age" : ""
},
methods : {
getStudent(){
axios.get(
"myServlet04.do", //请求路径
{
params : {
"name" : "aaabbb"
}
} //请求参数
).then(result=>{
var data = result.data;
this.id = data.id;
this.name = data.name;
this.age = data.age;
})
axios.post(
"myServlet04.do", //请求路径
/*
该方式发送数据是一个 Request Payload的数据格式,一般的数据格式都是Form Data格式
所以我们之前写的以json形式的参数就发送不出去
只能通过传统字符串的方式为后台发送参数
*/
"name=aaabbbccc"
).then(result=>{
var data = result.data;
this.id = data.id;
this.name = data.name;
this.age = data.age;
})
}
}
})
</script>
</body>
</html>
二 vue-resource插件处理ajax请求
1 处理get请求
- 语法
this.$http.get("请求路径?参数").then(function(result){});
- jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>mytitle</title>
<!--
导入vue-resource类库之后,就可以使用this.$http.xxx来实现ajax功能了
注意:对于idea,直接复制粘贴过来的文件有可能报404错误(资源定位不到的)
这时我们可以先手动创建这个文件,在复制粘贴里面的内容到该文件中就可以了
-->
<script src="vue/vue-2.4.0.js"></script>
<script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<button @click="getStudent">点击取得学生信息</button>
<br/>
<br/>
编号:<span>{{id}}</span><br/>
姓名:<span>{{name}}</span><br/>
年龄:<span>{{age}}</span><br/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"id" : "",
"name" : "",
"age" : ""
},
methods : {
getStudent(){
//发出ajax请求,取得学生信息,在页面中局部刷新学生信息
//对于参数的传递,get请求和post请求的参数传递的语法是不同的,这一点有别于其他的前端语言
//对于get请求,必须是在路径的后面以url?key1=value1&key2=value2&key3=value3这种传统的形式来传递参数
this.$http.get("myServlet01.do?name=zs123").then(function (data) {
//通过data.body的形式来拿到服务器返回成功的数据
//alert(data.body.id);
//为页面填写值
/*this.id = data.body.id;
this.name = data.body.name;
this.age = data.body.age;*/
data = data.body;
this.id = data.id;
this.name = data.name;
this.age = data.age;
})
}
}
})
</script>
</body>
</html>
2 处理post请求
- 语法
this.$http.post("请求路径",参数如:{"name":"ls123"},{emulateJSON:true}).then(function (data) {});
说明:{emulateJSON:true}设置,提交的内容类型就设置为了普通表单的格式传递参数
- jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>mytitle</title>
<script src="vue/vue-2.4.0.js"></script>
<script src="vue/vue-resource-1.3.4.js"></script>
</head>
<body>
<div id="app">
<button @click="getStudent">点击取得学生信息</button>
<br/>
<br/>
编号:<span>{{id}}</span><br/>
姓名:<span>{{name}}</span><br/>
年龄:<span>{{age}}</span><br/>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"id" : "",
"name" : "",
"age" : ""
},
methods : {
getStudent(){
//发出ajax请求,取得学生信息,在页面中局部刷新学生信息
//发出post请求
//post请求参数传递的方式,是以请求体的方式来传递的,所以不能将参数挂在url后面
/*
关于post请求传递参数的问题:
手动发起的post请求,默认没有表单格式,所以有些服务器就处理不了
我们需要通过post方法的第三个参数,{emulateJSON:true}设置,提交的内容类型就设置为了普通表单的格式传递参数
*/
this.$http.post("myServlet02.do",{"name":"ls123"},{emulateJSON:true}).then(function (data) {
//与get请求一样,我们接受到后台响应的信息,需要先使用data.body进行处理,才能够拿到我们需要的值
data = data.body;
this.id = data.id;
this.name = data.name;
this.age = data.age;
})
}
}
})
</script>
</body>
</html>