问题描述:

在用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+"条数据");
        }
      },  //检查范围内是否有数据
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐