VUE-ajax

news/2024/11/14 20:58:37/

ajax_0">VUE-ajax

vue-resource的介绍

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

官网链接:

  • 文档(http相关):https://github.com/pagekit/vue-resource/blob/master/docs/http.md

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。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script><style>#test {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></head><body><div id="test"><input type="text" v-model="country"> <input type="text" v-model="gold_num"><input type="text" v-model="score"><button>addDate</button><table id="tb"><tr><th>name</th><th>gold_num</th><th>score</th><th>operator</th></tr><tr v-for="item in list"><td>{{item.countryid}}</td><td>{{item.gold}}</td><td>{{item.rank}}</td><td><a href="javascript:void(0)">edit</a></td></tr></table></div><script>new Vue({el: "#test",data:{list: [],country: "",gold_num: 0,score: 0,},// Vue对象实例创建成功以后就会自动调用这个方法created:function(){this.getList()},methods: {getList: function(){// 请求服务器的api获取到奥运会排行榜this.$http.get("https://api.oioweb.cn/api/search/getOlyMedals").then(function (res) {// 1、处理服务器异常信息提示if (res.body.code != 200) {alert(res.body.message)return;}// 2、处理正常的数据逻辑this.list = res.body.result.medalsList; //直接将数据放到list数组当中,页面就会自动显console.log(this.list);})}}})</script></body></html>

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

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) {});
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script><style>#test {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></head><body><div id="test"><input type="text" v-model="id"> <input type="text" v-model="userId"><input type="text" v-model="title"><button @click="addDate">addDate</button><table id="tb"><tr><th>id</th><th>userId</th><th>title</th><th>operator</th></tr><tr v-for="item in list"><td>{{item.id}}</td><td>{{item.userId}}</td><td>{{item.title}}</td><td><a href="javascript:void(0)">edit</a></td></tr></table></div><script>new Vue({el: "#test",data:{list: [],id: 0,userId: 0,title: "",},created:function(){this.getList()},methods: {getList: function(){this.$http.get("http://jsonplaceholder.typicode.com/posts").then(function (res) {if (res.status != 200) {alert("failed")return;}this.list = res.body;})},addDate: function(){var url = "http://jsonplaceholder.typicode.com/posts";var postData = {id: this.id,userId: this.userId,title: this.title};var options = { emulateJSON: true };this.$http.post(url, postData, options).then(function (res) {console.log(res)if (res.status != 201) {alert(" add failed")return;}this.id=0;this.userId=0;this.title=""this.getList();})}}})</script></body></html>

delete

<!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是异常数据});
原理

由于浏览器的安全性限制,默认不允许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.bodyif (result.status === 0) {// 成功了this.list = result.message} else {// 失败了alert('获取数据失败!')}})}}});</script>

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

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

第二步是在Ajax请求的url中写相对路径:(注意,前面不要带/

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

http://www.ppmy.cn/news/1425417.html

相关文章

小型企业网络优化加速方案

随着数字化经济蓬勃发展&#xff0c;小型企业的网络基础设施变得尤为重要。在这一浪潮中&#xff0c;建立一个稳定、高效的企业网络成为支撑业务发展的关键。本文将深入研究针对小型企业设计的网络优化加速方案&#xff0c;助力企业主了解如何规划和实施适合自身业务需求的网络…

vue快速入门(三十三)scoped解决组件样式冲突

注释很详细&#xff0c;直接上代码 上一篇 新增内容 scoped解决样式冲突的用法 源码 MyHeader.vue <!-- 用于测试全局注册组件 --> <template><div id"myHeader"><h1>又可以愉快的学习啦</h1></div> </template><scri…

【论文笔记 | 异步联邦】Asynchronous Federated Optimization

论文信息 Asynchronous Federated Optimization&#xff0c;OPT2020: 12th Annual Workshop on Optimization for Machine Learning&#xff0c;不属于ccfa introduction 背景&#xff1a;联邦学习有三个关键性质 任务激活不频繁&#xff08;比较难以达成条件&#xff09;&…

Spring Boot 加载本地 JAR 包的技术实践

随着微服务架构的兴起&#xff0c;Spring Boot 因其快速构建、易于部署的特性&#xff0c;成为了众多开发者的首选框架。在开发过程中&#xff0c;我们有时需要引入一些不在公共 Maven 仓库中的 JAR 包作为依赖&#xff0c;这时候就需要加载本地的 JAR 包。本文将详细介绍在 Sp…

[C++][算法基础]欧拉函数(线性筛)

给定一个正整数 n&#xff0c;求 1∼n 中每个数的欧拉函数之和。 输入格式 共一行&#xff0c;包含一个整数 n。 输出格式 共一行&#xff0c;包含一个整数&#xff0c;表示 1∼n 中每个数的欧拉函数之和。 数据范围 1≤n≤ 输入样例&#xff1a; 6输出样例&#xff1a…

FPGA开发之状态机设计

状态机是许多数字系统的核心部件&#xff0c;是一类重要的时序逻辑电路。通常包括三个部分&#xff1a; 一是下一个状态的逻辑电路&#xff0c; 二是存储状态机当前状态的时序逻辑电路&#xff0c; 三是输出组合逻辑电路。 通常&#xff0c;状态机的状态数量有限&#xff0c;称…

Mac使用Idea新手常用快捷键

Mac使用Idea新手常用快捷键 前言常用指令1、选中多个文件&#xff0c;不连续2、点进去查看某个类的代码3、复制某个类的全类名4、鼠标滚轮选中多行&#xff0c;然后选中这些行上同一列光标所在的单词 前言 入职新公司后用的是mac&#xff0c;从windows切换到mac&#xff0c;一…

安卓手机APP开发__媒体开发部分__直播流

安卓手机APP开发__媒体开发部分__直播流 目录 概述 检查和监控直播的播放 在直播流中的定位查找 直播播放的用户界面 配置直播播放的参数 播放速度调整 定制播放速度的调整算法 直播窗口背后的异常和ERROR_CODE_BEHIND_LIVE_WINDOW 概述 ExoPlayer没有任何特殊配置的…