Vuejs012---vuejs 的 ajax 请求_综合

一：vuejs 的 ajax 请求

1.1 get 和 post 请求

vue-resource的get请求

vue-resource的post请求

axios 插件实现 ajax 的 get和 post 请求

一：vuejs 的 ajax 请求

vuejs 本身不支持发送 ajax 请求的

需要使用插件来实现

vue-resource 插件

axios 插件

1.1 get 和 post 请求

使用 vue-resource 插件来实现 get 和 post 请求

vuejs 将请求发送到后台，后台进行请求处理

vue-resource的get请求

<%@ 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请求，取得学生信息，在页面中局部刷新学生信息//this.$http.get("请求路径",请求参数，then(回调函数))//对于参数的传递，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>

vue-resource的post请求

<%@ 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请求，取得学生信息，在页面中局部刷新学生信息//发出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>

后台（ java 、 Node.js... ）

使用 axios 插件实现 ajax 的 get 和 post 请求

axios 插件的两种使用方式

axios({

method:"get/post"

})

axios.get(

//url

{}

//param

)

axios 插件实现 ajax 的 get和 post 请求

<%@ 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>

总结：axios 的形式是一个基于 Promise 的 HTTP 请求客户端，用来发

出请求。该形式也是 vue2.0 官方推荐的形式，官方在推出了该形式

后，同时就不再对之前的 vue-resource 的形式进行更新和维护了。所

以更推荐的是使用 axios 的形式来处理 ajax 请求。