接口来源于黑马教程
1、get方法
<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()方法获得最终需要的数据
