(vue)在ajax获取数据时使用loading组件不起作用
问题描述:
在用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 post
async: false, //true false
url:"***************"
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 post
async: true, //true false
url:"*************",
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+"条数据");
}
}, //检查范围内是否有数据
更多推荐
所有评论(0)