前端常用获取接口数据方法
前端常用获取接口数据方法
jq ajax
<body>
<button id="btnGETINFO">发起单参数的GET请求</button>
<script>
$(function () {
$(#btnGETINFO).on(click, function () {
$.get(http://www.liulongbin.top:3006/api/getbooks, {
id: 1 }, function (res) {
console.log(res)
})
})
})
</script>
</body>
返回结果 2、post方法
<body>
<button id="btnPOST">发起POST请求</button>
<script>
$(function () {
$(#btnPOST).on(click, function () {
$.post(http://www.liulongbin.top:3006/api/addbook, {
bookname: 水浒传, author: 施耐庵, publisher: 天津图书出版社 }, function (res) {
console.log(res)
})
})
})
</script>
</body>
返回结果 3、ajax方法
<body>
<button id="btnGET">发起GET请求</button>
<script>
$(function () {
$(#btnGET).on(click, function () {
$.ajax({
type: GET,
url: http://www.liulongbin.top:3006/api/getbooks,
data: {
id: 1
},
success: function (res) {
console.log(res)
}
})
})
})
</script>
</body>
返回结果
<body>
<button id="btnPOST">发起POST请求</button>
<script>
$(function () {
$(#btnPOST).on(click, function () {
$.ajax({
type: POST,
url: http://www.liulongbin.top:3006/api/addbook,
data: {
bookname: 史记,
author: 司马迁,
publisher: 上海图书出版社
},
success: function (res) {
console.log(res)
}
})
})
})
</script>
</body>
返回结果
实战运用：jq ajax获取后台数据并渲染echart图标
接口地址为空，读者可填自己需要获取数据的真实地址 基本逻辑： 定义一个数组 定义一个x轴和seriesData 用数组保存返回结果，同时把数组中的结果赋值给x轴和seriesData 一般在项目中也是这种思路
<!-- 基于准备好的dom，初始化echarts实例 -->
var myChart = echarts.init(document.getElementById(main));
let data = [];
let xAxis = {
type: category};
let seriesData
$.ajax({
url: ,
method: GET,
dataType: JSON,
success: function(result) {
let data = result.data;
if(result.code == 200) {
xAxis.data = data.xAxis;
seriesData = data.series;
}
},
async: false
})
uniapp中使用request请求数据
官方教程地址： https://uniapp.dcloud.net.cn/api/request/request.html 实战使用：
handleData() {
let arr = [];
this.oldNbaList.forEach(item => {
arr.push(item.list);
})
this.nbaList = arr.flat();
},
request() {
uni.request({
url: http://apis.juhe.cn/fapig/nba/query?key=,
data: {
},
header: {
custom-header: hello //自定义请求头信息
},
success: (res) => {
this.oldNbaList = res.data.result.matchs;
if (this.oldNbaList.length > 0) {
this.handleData();
}
console.log(this.nbaList);
},
});
}
逻辑分析： 通过request方法获取数据，在success成功返回函数中把获得到的数据赋值给oldNbaList，并通过foreach循环push进arr数组，最后用flat()方法获得最终需要的数据
上一篇：
通过多线程提高代码的执行效率例子
下一篇：
TCP链接，为什么要三次握手？