Vue.js Ajax(axios)
Vue.js Ajax(axios)
Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。
Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。
Github开源地址: github.com/axios/axios
引入方法
这里不介绍,npm安装哟。我们就是转Vue.js
GET 方法
我们可以简单的读取 JSON 数据:
我的 saicheng.js
:
这里编写了 axious 的请求示例。
我们 el
绑定了 onstatus
这个class。
接受数据,我们定义了格式,请看代码
// ajax请求 url
// 请求得到 赛程的list
// 后面准备遍历
function get_saicheng_list() {
var vm = new Vue(
{
el: '.onstatus',
// 收数据
data () {
return {
code: -1,
cur_time: 0,
matching: [],
match_not_start: [],
match_end: [],
msg: '',
teamImgDefault: teamImgDefault,
imagePath: imagePath,
}
},
mounted () {
var url = urlapiPrex+"real/matching";
var params = {type: 0};
var configs = {timeout: 3000,params:params}
axios.get(url,configs)
.then(res => {
this.code = res.data.code;
this.msg = res.data.msg;
this.cur_time = res.data.data.cur_time;
this.matching = res.data.data.matching;
this.match_not_start = res.data.data.match_not_start;
this.match_end = res.data.data.match_end;
})
.catch(err => {
console.log(err)
})
}
})
}
在这里,我们给绑定到视图。因为我留了一行注释的,死数据给大家。
<ol class="zd mt-1"></ol>
<ol class="onstatus" style="margin-top: 20px">
<!-- <li id="1824806" leagueid="2074">
<span class="check"><i></i></span>
<span class="time">16:00</span>
<span class="league"><i style="background:#9DA901"></i> 西甲</span>
<span class="status">未</span>
<span class="game">
<span class="gleft">
<i><img src="//static.gunqiu.com/static/img/team/pcnew/team_31878.png@!20px"
alt="" /></i>
<i class="teamname">阿拉维斯</i>
</span>
<span class="gscore"> <i class="count">-</i> <i>-</i></span>
<span class="gright">
<i><img src="//static.gunqiu.com/static/img/team/pcnew/team_31877.png@!20px"
alt="" /></i>
<i class="teamname">皇家贝蒂斯</i>
</span>
</span>
<span class="corner"> - </span>
<span class="odds">
<i>
<em>1.85</em>
<em>平/半</em>
<em>1.95</em>
</i>
<i class="topline">
<em>1.80</em>
<em>2.5</em>
<em>2.00</em>
</i>
</span>
<span class="onlive"> </span>
<span class="info blue-color">
</span>
<span class="recommend red-color">
</span>
<span class="option"><a href="//www.gunqiu.com/match_live/1824806">分析</a> </span>
</li> -->
<li v-for="v in matching" :id="v.match_id" :leagueid="v.competition_id" :matchstate="v.match_state" >
<span class="check"><i></i></span>
<span class="time">{{v.matchTime}}</span>
<span class="league"><i :style="{background:v.competition_color}"></i>{{v.competition_name}}</span>
<span class="status red-color" :id="'status-'+v.match_id">{{v.past_time}}</span>
<span class="game">
<span class="gleft">
<template v-if="v.homeIcon">
<i><img :src="v.homeIcon" alt="" /></i>
</template>
<template v-else>
<i><img :src="teamImgDefault" alt="" /></i>
</template>
<i class="teamname">{{v.home_name}}</i>
<i class="red-pai" style="display: none" :v-show="v.home_red>0">{{v.home_red}}</i>
<i class="yellow-pai" style="display: none" :v-show="v.home_yellow>0">{{v.home_yellow}}</i>
</span>
<span class="gscore">
<i class="countgreen-color">{{v.home_score}}-{{v.away_score}}</i>
<i>({{v.home_bc_score}}-{{v.away_bc_score}})</i>
</span>
</span>
</li>
那么展示效果如下:
请求network与console如下:
推荐文章: