問題描述：

在用ajax獲取數(shù)據(jù)時(shí) 頁面沒有變化，想用一個loading圖標(biāo)在獲取數(shù)據(jù)時(shí)顯示，獲取完成后隱藏

整個系統(tǒng)用到了vue框架，在執(zhí)行sure方法時(shí)調(diào)用ajax函數(shù)

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():獲取接口數(shù)據(jù)

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);}});}, //獲取接口數(shù)據(jù)

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

checkData() {if(lngarr.length===0){alert("該范圍內(nèi)沒有數(shù)據(jù)");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("數(shù)據(jù)獲取成功，共"+lngarr.length+"條數(shù)據(jù)");}}, //檢查范圍內(nèi)是否有數(shù)據(jù)

addDataSure():添加數(shù)據(jù)

addPointSure(){if (document.createElement('canvas').getContext) {for (var i = 0; i < lngarr.length; i++) {// 添加海量點(diǎn)數(shù)據(jù)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,//設(shè)置允許信息窗發(fā)送短息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文件，將方法先寫好，之后直接調(diào)用

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: '數(shù)據(jù)加載中',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兩個函數(shù)
然后在組件中

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

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

發(fā)現(xiàn)不起作用，查看控制臺 確實(shí)執(zhí)行了函數(shù)

將hideLoading函數(shù)注釋掉發(fā)現(xiàn) loading在添加點(diǎn)完成后才出現(xiàn)

解決方法：

1.同步和異步

（1）當(dāng)把a(bǔ)sync設(shè)為false時(shí)，即同步請求。這個時(shí)候ajax塊發(fā)出請求后，會停留在success{}中，不會去執(zhí)行后面的所有函數(shù)（checkPoint，addPointSure），直到success{}部分執(zhí)行完畢。

（2）當(dāng)把a(bǔ)sync設(shè)為true時(shí)，即異步請求。ajax發(fā)送請求后，在等待server端返回的這個過程中，前臺會繼續(xù) 執(zhí)行ajax塊后面的腳本，直到server端返回正確的結(jié)果才會去執(zhí)行success。

因此先將async設(shè)為true

async: true,

這時(shí)出現(xiàn)了第二個問題，返回的數(shù)據(jù)長度為0，也就是沒有獲取到數(shù)據(jù)

2.查看函數(shù)的執(zhí)行順序

在所有的函數(shù)執(zhí)行都打印相應(yīng)函數(shù)名稱，便于知道函數(shù)的執(zhí)行順序
尤其是在succecc函數(shù)中打印

console.log('success');

查看控制臺結(jié)果

可以看到success是最后執(zhí)行的，也就是說在success執(zhí)行結(jié)束前前臺去跑后面兩個函數(shù)是沒有數(shù)據(jù)的，因此將這兩個函數(shù)放在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);}});}, //獲取接口數(shù)據(jù) addPointSure(){console.log("addPoint");if (document.createElement('canvas').getContext) {for (var i = 0; i < lngarr.length; i++) {// 添加海量點(diǎn)數(shù)據(jù)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,//設(shè)置允許信息窗發(fā)送短息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("該范圍內(nèi)沒有數(shù)據(jù)");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("數(shù)據(jù)獲取成功，共"+lngarr.length+"條數(shù)據(jù)");}}, //檢查范圍內(nèi)是否有數(shù)據(jù)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。