Vue从入门到精通-09-Vue中的Ajax请求【万字长文，感谢支持】

已于 2024-05-03 16:04:01 修改
阅读量879 收藏 12
点赞数 16
分类专栏： Vue教程 文章标签： vue.js ajax 前端
于 2024-05-03 15:48:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76926204/article/details/138417924
版权

vue-resource的介绍

vue-resource是Vue高度集成的第三方包。

官网链接：

vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js和vue-resource.js文件。

解释：

vue.js文件向Windows对象暴露了Vue这个关键词；vue-resource.js向Vue身上挂载了this.$http这个属性。于是，我们可以直接写this.$http.get或者this.$http.post或者this.$http.jsonp来调用。

vue-resource 发送Ajax请求

常见的数据请求类型包括：get、post、jsonp。下面我们分别讲一讲。

get 请求

格式举例：

     this.$http.get(url)
         .then(function (result) { // 当发起get请求之后，通过 .then 来设置成功的回调函数
             console.log(result.body); // response.body就是服务器返回的成功的数据
             var result = result.body;
         },
             function (err) {
                 //err是异常数据
             });

获取到的response.body就是要获取的数据，但直接打印出来是 object，所以要记得转成string。

举例：获取数据

现规定，获取品牌数据的 api 接口说明如下：

 
<!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
     #app {
         width: 800px;
         margin: 20px auto;
     }
 ​
     #tb {
         width: 800px;
         border-collapse: collapse;
         margin: 20px auto;
     }
 ​
     #tb th {
         background-color: #0094ff;
         color: white;
         font-size: 16px;
         padding: 5px;
         text-align: center;
         border: 1px solid black;
     }
 ​
     #tb td {
         padding: 5px;
         text-align: center;
         border: 1px solid black;
     }
     </style>
     <script src="../vue.js"></script>
     <script src="../vue-resource121.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <input type="text" v-model="id">
         <input type="text" v-model="pname">
         <button>添加数据</button>
 ​
         <table id="tb">
             <tr>
                 <th>编号</th>
                 <th>名称</th>
                 <th>创建时间</th>
                 <th>操作</th>
             </tr>
             <tr v-for="item in list">
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.ctime}}</td>
                 <td>
                 <a href="javascript:void(0)">删除</a>
                 </td>
             </tr>
         </table>
     </div>
 </body>
 <script>
 ​
  new Vue({
     el :'#app',
     data:{
         list:[]
     },
     // Vue对象实例创建成功以后就会自动调用这个方法
     created:function(){
         this.getlist();
     },
     methods:{
         getlist:function(){
             // 请求服务器的api获取到品牌的数据列表
             this.$http.get('http://vueapi.ittun.com/api/getprodlist')
             .then(function(response){
                 // 1、处理服务器异常信息提示
                 if(response.body.status != 0){
                     alert(response.body.message);
                     return;
                 }
 ​
                 // 2、处理正常的数据逻辑
                this.list =  response.body.message;  //直接将数据放到list数组当中，页面就会自动显示
                console.log(this.list);
             });
         }
     }
  });
 </script>
 ​
 </html>
 ​

上方代码中，我们用到了生命周期函数created，意思是：程序一加载，就马上在created这个函数里执行getlist()方法。

运行的结果如下：

如果我直接在浏览器中输入请求的url，获取的json数据如下：（可以看到，这种方式获取的是相同的数据）

post请求

格式举例：

     // 方法：$http.post(url, 传给服务器的请求体中的数据， {emulateJSON:true})
     // 通过 post 方法的第三个参数{ emulateJSON: true } ，来设置 提交的内容类型 为 普通表单数据格式
     this.$http.post(url, { name: '奔驰' }, { emulateJSON: true })
         .then(function (response) {
             alert(response.body.message);
         },
             function (error) {
 ​
             });

上方代码中，post()方法中有三个参数，其中第三个参数是固定值，照着写就可以了。

代码举例：（添加数据）

现规定，添加品牌数据的 api 接口说明如下：

代码如下：（在上一段代码的基础之上，添加代码）

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         #app {
             width: 800px;
             margin: 20px auto;
         }
 ​
         #tb {
             width: 800px;
             border-collapse: collapse;
             margin: 20px auto;
         }
 ​
         #tb th {
             background-color: #0094ff;
             color: white;
             font-size: 16px;
             padding: 5px;
             text-align: center;
             border: 1px solid black;
         }
 ​
         #tb td {
             padding: 5px;
             text-align: center;
             border: 1px solid black;
         }
     </style>
     <script src="vue.js"></script>
     <script src="vue-resource121.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <input type="text" v-model="pname">
         <button @click="adddata">添加数据</button>
 ​
         <table id="tb">
             <tr>
                 <th>编号</th>
                 <th>名称</th>
                 <th>创建时间</th>
                 <th>操作</th>
             </tr>
             <tr v-for="item in list">
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.ctime}}</td>
                 <td>
                     <a href="javascript:void(0)">删除</a>
                 </td>
             </tr>
         </table>
     </div>
 </body>
 <script>
 ​
     new Vue({
         el: '#app',
         data: {
             pname: '', //这个 pname 是我在输入框里添加的数据。我们要把这个传给服务器
             list: []
         },
         // Vue对象实例创建成功以后就会自动调用这个方法
         created: function () {
             this.getlist();
         },
         methods: {
             //ajax请求：添加数据
             adddata: function () {
                 // 1、获取用户填写的文本框的值只需要通过this.pname即可
                 // 2、调用ajax的post方法将数据上传到服务器
                 var url = 'http://vueapi.ittun.com/api/addproduct';
                 var postData = { name: this.pname };  //【重要】键`name`是json中约定好的字段。我们把这个字段传给服务器
                 var options = { emulateJSON: true };
                 this.$http.post(url, postData, options).then(function (response) {
                     if (response.body.status != 0) {
                         alert(response.body.message);
                         return;
                     }
 ​
                     this.pname = '';
 ​
                     // 3、添加完成后，只需要手动再调用一次getlist（将列表数据重新加载一次），即可刷新页面上的数据
                     this.getlist();
 ​
                 });
             },
 ​
             //ajax请求：获取数据
             getlist: function () {
                 this.$http.get('http://vueapi.ittun.com/api/getprodlist')
                     .then(function (response) {
                         // 1、处理服务器异常信息提示
                         if (response.body.status != 0) {
                             alert(response.body.message);
                             return;
                         }
 ​
                         // 2、处理正常的数据逻辑
                         this.list = response.body.message;
                         console.log(this.list);
                     });
             }
         }
     });
 </script>
 ​
 </html>
代码举例：（删除数据）

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
         #app {
             width: 800px;
             margin: 20px auto;
         }
 ​
         #tb {
             width: 800px;
             border-collapse: collapse;
             margin: 20px auto;
         }
 ​
         #tb th {
             background-color: #0094ff;
             color: white;
             font-size: 16px;
             padding: 5px;
             text-align: center;
             border: 1px solid black;
         }
 ​
         #tb td {
             padding: 5px;
             text-align: center;
             border: 1px solid black;
         }
     </style>
     <script src="vue.js"></script>
     <script src="vue-resource121.js"></script>
 </head>
 ​
 <body>
     <div id="app">
         <input type="text" v-model="pname">
         <button @click="adddata">添加数据</button>
 ​
         <table id="tb">
             <tr>
                 <th>编号</th>
                 <th>名称</th>
                 <th>创建时间</th>
                 <th>操作</th>
             </tr>
             <tr v-for="item in list">
                 <td>{{item.id}}</td>
                 <td>{{item.name}}</td>
                 <td>{{item.ctime}}</td>
                 <td>
                     <!-- 具体要删除哪个item，不能写死。所以要根据id来删 -->
                     <a href="javascript:void(0)" @click="deldata(item.id)">删除</a>
                 </td>
             </tr>
         </table>
     </div>
 </body>
 <script>
 ​
     new Vue({
         el: '#app',
         data: {
             pname: '', //这个 pname 是我在输入框里添加的数据。我们要把这个传给服务器
             list: []
         },
         // Vue对象实例创建成功以后就会自动调用这个方法
         created: function () {
             this.getlist();
         },
         methods: {
             //ajax请求：添加数据
             adddata: function () {
                 // 1、获取用户填写的文本框的值只需要通过this.pname即可
                 // 2、调用ajax的post方法将数据上传到服务器
                 var url = 'http://vueapi.ittun.com/api/addproduct';
                 var postData = { name: this.pname };  //【重要】键`name`是json中约定好的字段。我们把这个字段传给服务器
                 var options = { emulateJSON: true };
                 this.$http.post(url, postData, options).then(function (response) {
                     if (response.body.status != 0) {
                         alert(response.body.message);
                         return;
                     }
 ​
                     this.pname = '';
 ​
                     // 3、直接将列表数据重新加载一次，即可刷新页面上的数据
                     this.getlist();
 ​
                 });
             },
 ​
             //ajax请求：获取数据
             getlist: function () {
                 this.$http.get('http://vueapi.ittun.com/api/getprodlist')
                     .then(function (response) {
                         // 1、处理服务器异常信息提示
                         if (response.body.status != 0) {
                             alert(response.body.message);
                             return;
                         }
 ​
                         // 2、处理正常的数据逻辑
                         this.list = response.body.message;
                         console.log(this.list);
                     });
             },
 ​
             // ajax请求：删除数据
             deldata: function (id) {
                 this.$http.get('http://vueapi.ittun.com/api/delproduct/' + id)
                     .then(function (response) {
                         if (response.body.status != 0) {
                             alert(response.body.message);
                             return;
                         }
 ​
                         // 刷新列表
                         this.getlist();
                     });
             }
         }
     });
 </script>
 ​
 </html>
 ​

jsonp

格式举例：

     // 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：
     // url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上
     this.$http.jsonp('http://vuecms.ittun.com/api/getlunbo?id=1')
         .then(function (response) {
             console.log(JSON.stringify(response.body));
         }, function (err) {
             //err是异常数据
         });

请求结果：

JSONP的实现原理

由于浏览器的安全性限制，默认不允许Ajax发起跨域（协议不同、域名不同、端口号不同）的请求。浏览器认为这种访问不安全。

JSONP的实现原理：通过动态创建script标签的形式，用script标签的src属性，代表api接口的url，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）。

具体实现过程：

  • 先在客户端定义一个回调方法，预定义对数据的操作

  • 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的api接口；

  • 服务器api接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；

  • 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了

axios

除了 vue-resource 之外，还可以使用 axios 的第三方包实现实现数据的请求。

通过Vue全局配置api接口的url地址

api接口的url地址包括：绝对路径+相对路径。

我们在做Ajax请求的时候，所填写的url建议填相对路径，然后把绝对路径放在全局的位置。

Vue就提供了这个功能。举例如下：

  <script>
     // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
     Vue.http.options.root = 'http://smyhvae/';
     // 全局启用 emulateJSON 选项
     Vue.http.options.emulateJSON = true;
 ​
     var vm = new Vue({
       el: '#app',
       data: {
         name: '',
         list: [ // 存放所有品牌列表的数组
         ]
       },
       created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
         this.getAllList()
       },
       methods: {
         getAllList() { // 获取所有的品牌列表
           // 分析：
           // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
           // 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
           // 3. this.$http.get('url').then(function(result){})
           // 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
           // 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
 ​
           this.$http.get('api/getprodlist').then(result => {
             // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
             var result = result.body
             if (result.status === 0) {
               // 成功了
               this.list = result.message
             } else {
               // 失败了
               alert('获取数据失败！')
             }
           })
         }
       }
     });
   </script>
 ​

如上方代码所示，第一步是在全局的位置写绝对路径：

     Vue.http.options.root = 'http://smyhvae/';

第二步是在Ajax请求的url中写相对路径：（注意，前面不要带/）

this.$http.get('api/getprodlist')

希望各位可以点个赞点个关注，这对up真的很重要，谢谢大家啦！

被瞧不起的神
关注
  • 16
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue3.0版本发送ajax请求
欣欣酱博客
02-19 5329
首先简单写一点json数据用来测试 { "name":"杨幂", "age":18, "gender":"女" } 再来写Ajax接口用来在前台引入做铺垫 import {ref} from "vue" //引入axios import axios from "axios"; //发送ajax请求 export default function(url:string){ //加载状态 const loading = ref(true) //加载请
vue3.2的ajax请求
01-25 196
vue3.2的ajax请求vue3.2的ajax请求
头歌（Educoder）——Vue基础——Vue3 Ajax(axios)请求
最新发布
weixin_60732009的博客
05-16 1147
第1关：Vue3 Ajax(axios)请求 任务描述 本关任务：编写一个能从指定 API 获取笑话的程序。 相关知识 为了完成本关任务，你需要掌握： Vue 与 Ajax； axios 请求的特点； 安装 Axios； 创建实例的方法； axios 实例方法； 具体代码演示； 实现跨域请求。
vue3关于ajax跨域请求问题
m0_51758445的博客
11-07 1087
vue3关于ajax跨域请求问题
vue3 ajax
翱翔-蓝天
12-27 1002
这种方式可以使你的 HTTP 请求逻辑更加清晰和集中，更容易维护和复用。记得根据你的实际需求调整上面的代码，例如不同的 baseURL、请求头、错误处理方式等。请确保根据你的具体需求调整这些步骤，例如，处理不同类型的请求、不同的端点以及不同的响应类型。
vue从入门到精通
03-28
vue从入门到精通适合刚入职场的小白，也适合职场多年的前端高手，为您全方位打造
vue 3.0学习笔记(从入门到精通)
10-07
本文将从入门到精通的角度详细介绍Vue 3.0的关键知识点。 首先，安装Vue 3.0的开发环境是至关重要的。你可以通过npm（Node Package Manager）全局安装Vue CLI的最新版本，命令为`npm I -g @vue/cli@next`。接着，...
vue从入门到精通.rar
03-30
本教程旨在帮助初学者快速掌握Vue的核心概念和实际应用，通过一系列源码实例，逐步从入门到精通。 1. **安装与基本使用** 首先，你需要了解如何在项目中安装Vue。Vue可以通过npm（Node Package Manager）进行全局...
Vue从入门到精通基础课程（视频）.txt
06-05
该资源适合新接触Vue的人员进行学习，通过视频进行学习，更方便于理解。
VUE.JS视频教学-入门到精通-全套
07-04
vue.js视频教程从入门到精通，全套视频，好东西就要分享，祝愿所有的开发小伙伴能学到东西。
vue脚手架配置代理
weixin_45077672的博客
08-24 263
vue脚手架配置代理 方法一 ​ 在vue.config.js中添加如下配置： devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二 ​ 编写vue.config.js配置具体代理规则： module.exports = { de
Vue进阶：Vue中的ajax请求
做一只猫的博客
01-25 2606
理解：数据在组件的自身（子组件），但根据数据生成的结构需要组件的使用者（父组件）来决定。（games数据在Category（子）组件中，但使用数据所遍历出来的结构由App（父）组件决定）在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。为什么在Actions 中给的是 context(上下文)，明明只需要进行commit操作，为啥不直接给一个commit就可以了。一、Vue中的ajax请求。
VUE-ajax
别追我我有止咳糖浆
04-19 821
/ 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：// url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上id=1')//err是异常数据});
Vue中使用ajax技术
m0_62475892的博客
04-10 3817
Vue自学笔记
前端基础学习——Vue框架-AJAX的使用
weixin_53919192的博客
07-14 6068
本文为大家介绍了前端基础学习——Vue框架-AJAX的使用，希望对你有帮助~~
vue的ajax有几种方法,在 Vue 中使用 Ajax 的几种姿势
weixin_42498981的博客
08-05 8809
作为一名前端开发人员, 使用 Vue 也有一段时间了, 刚好有时间来总结一下在 Vue 中使用 Ajax 的一些方式不同的方式有各自的优点和缺点, 这篇文章将会简单地阐述一下主要的几种方式注入 Vue 根实例组件中直接使用利用 Vuex 中的 actionsVue-router 路由导航守卫注入 Vue 根实例记得 Vue 刚发布 2.0 的时候, 那时候还有一个挺活跃的库, 叫做 vue-res...
vue项目中ajax请求方法配置
luwenze的博客
12-05 6299
1.首先项目中安装axios和qs依赖包 npm install axios --save npm install qs --save 2.配置ajax.js文件 import axios from 'axios'//引入axios let qs = require('qs')//引入qs模块 let errorMsg = { '400':'系统繁忙，请稍后再试', '403':'无该功...
vue 中使用 AJAX获取数据的方法
weixin_34051201的博客
12-10 676
在VUE开发时，数据可以使用jquery和vue-resource来获取数据。在获取数据时，一定需要给一个数据初始值。 看下例： <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, crea...
Vue2入门指南：从零开始到精通必备知识点
5. **路由管理—vue-router**：详细解释了如何使用vue-router实现页面之间的导航和路由管理，这对于构建可扩展的应用至关重要。 6. **UI组件库推荐**：对于初学者，推荐了一些常用的Vue UI组件库，如Element UI、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

被瞧不起的神

谢谢啦，感谢支持|一起努力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值