問題描述：

在用ajax獲取數據時 頁面沒有變化，想用一個loading圖標在獲取數據時顯示，獲取完成后隱藏

整個系統用到了vue框架，在執行sure方法時調用ajax函數

sure() {console.log("pl_lon:" + slng + " " + "pl_lat:" + slat + " " + "pr_lon:" + elng + " " + "pr_lat:" + elat );console.log("s:" + this.st + " " + "e:" + this.et);this.getAjaxData();this.checkData();this.addPointSure();}, //sure

getAjaxData():獲取接口數據

getAjaxData() {$.ajax({type: "get", //get postasync: false, //true falseurl:"***************"data: "",dataType: "json", crossDomain: true,success: function(data){lngarr = [];latarr = [];$.each(data, function (i, val) {lngarr[i] = val['lon'];latarr[i] = val['lat'];},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log("請求對象XMLHttpRequest: " + XMLHttpRequest.status);console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);console.log("錯誤類型textStatus: " + textStatus);console.log("異常對象errorThrown: " + errorThrown);}});}, //獲取接口數據

checkData():檢查數據是否獲取到

checkData() {if(lngarr.length===0){alert("該范圍內沒有數據");for(var i = 0; i < this.overlays.length; i++){this.map.removeOverlay(this.overlays[i]);}this.overlays.length = 0;classFlag = false;hasFlag = false;}else{alert("數據獲取成功，共"+lngarr.length+"條數據");}}, //檢查范圍內是否有數據

addDataSure():添加數據

addPointSure(){if (document.createElement('canvas').getContext) {for (var i = 0; i < lngarr.length; i++) {// 添加海量點數據marker.push(new BMap.Point(lngarr[i], latarr[i]));}var options = {size:BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_CIRCLE, color:"yellow",};var pointCollection = new BMap.PointCollection(marker, options);this.map.addOverlay(pointCollection );pointCollection.addEventListener("click", function(e) {var id = ""; var text = ""; var time = "";for (var i = 0; i < lngarr.length; i++) {if (lngarr[i] === e.point.lng && latarr[i] === e.point.lat) {id = ID[i]; text = datatext[i]; time = datatime[i]; break;}}var opts = {enableMessage: false,//設置允許信息窗發送短息backgroundColor:" transparent",border:"0",color:"#ffffff"};var infowindow = new BMap.InfoWindow("ID:" + id + "<br/>time:" + time + "<br>text:"+ text , opts);var point = new BMap.Point(e.point.lng, e.point.lat);this.map.openInfoWindow(infowindow,point);});}},

loading采用的Element-ui中的loading組件
Element ui Loading
按照官方文檔提示先將組件裝好

import { Loading } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'

這里我新建了一個loading.js文件，將方法先寫好，之后直接調用

import { Loading } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'let loading = null; const showLoading = (params) => {console.log('showLoading');if(loading) {loading.close()}let options = {fullscreen: true,target: document.querySelector('#mainLoad'),lock: true,text: '數據加載中',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'};Object.assign(options,params);loading = Loading.service(options) }; const hideLoading = () => {console.log('closeLoading');loading.close() }; export {showLoading,hideLoading }

返回showLoading，hideLoading兩個函數
然后在組件中

import { showLoading, hideLoading } from './loading'

原先的想法是在ajax前showLoading，在ajax后hideLoading，即

發現不起作用，查看控制臺 確實執行了函數

將hideLoading函數注釋掉發現 loading在添加點完成后才出現

解決方法：

1.同步和異步

（1）當把async設為false時，即同步請求。這個時候ajax塊發出請求后，會停留在success{}中，不會去執行后面的所有函數（checkPoint，addPointSure），直到success{}部分執行完畢。

（2）當把async設為true時，即異步請求。ajax發送請求后，在等待server端返回的這個過程中，前臺會繼續 執行ajax塊后面的腳本，直到server端返回正確的結果才會去執行success。

因此先將async設為true

async: true,

這時出現了第二個問題，返回的數據長度為0，也就是沒有獲取到數據

2.查看函數的執行順序

在所有的函數執行都打印相應函數名稱，便于知道函數的執行順序
尤其是在succecc函數中打印

console.log('success');

查看控制臺結果

可以看到success是最后執行的，也就是說在success執行結束前前臺去跑后面兩個函數是沒有數據的，因此將這兩個函數放在success中即可

最終代碼

sure() {console.log("pl_lon:" + slng + " " + "pl_lat:" + slat + " " + "pr_lon:" + elng + " " + "pr_lat:" + elat );console.log("s:" + this.st + " " + "e:" + this.et);this.getAjaxData();this.checkData();this.addPointSure();}, //sure getAjaxData() {showLoading();console.log('getajaxData');var that = this;$.ajax({type: "get", //get postasync: true, //true falseurl:"*************",data: "",dataType: "json", crossDomain: true,success: function(data){lngarr = [];latarr = [];$.each(data, function (i, val) {lngarr[i] = val['lon'];latarr[i] = val['lat'];});console.log('success');that.checkData();that.addPointSure();},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log("請求對象XMLHttpRequest: " + XMLHttpRequest.status);console.log("XMLHttpRequest.readyState: " + XMLHttpRequest.readyState);console.log("錯誤類型textStatus: " + textStatus);console.log("異常對象errorThrown: " + errorThrown);}});}, //獲取接口數據 addPointSure(){console.log("addPoint");if (document.createElement('canvas').getContext) {for (var i = 0; i < lngarr.length; i++) {// 添加海量點數據marker.push(new BMap.Point(lngarr[i], latarr[i]));}var options = {size:BMAP_POINT_SIZE_SMALL, shape: BMAP_POINT_SHAPE_CIRCLE, color:"yellow",};var pointCollection = new BMap.PointCollection(marker, options);this.map.addOverlay(pointCollection );pointCollection.addEventListener("click", function(e) {var id = ""; var text = ""; var time = "";for (var i = 0; i < lngarr.length; i++) {if (lngarr[i] === e.point.lng && latarr[i] === e.point.lat) {id = ID[i]; text = datatext[i]; time = datatime[i]; break;}}var opts = {enableMessage: false,//設置允許信息窗發送短息backgroundColor:" transparent",border:"0",color:"#ffffff"};var infowindow = new BMap.InfoWindow("ID:" + id + "<br/>time:" + time + "<br>text:"+ text , opts);var point = new BMap.Point(e.point.lng, e.point.lat);this.map.openInfoWindow(infowindow,point);});}}, checkData() {console.log("checkData");hideLoading();if(lngarr.length===0){alert("該范圍內沒有數據");for(var i = 0; i < this.overlays.length; i++){this.map.removeOverlay(this.overlays[i]);}this.overlays.length = 0;classFlag = false;hasFlag = false;}else{alert("數據獲取成功，共"+lngarr.length+"條數據");}}, //檢查范圍內是否有數據

總結

以上是生活随笔為你收集整理的(vue)在ajax获取数据时使用loading组件不起作用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。