首页 > 解决方案 > AJAX函数调用在函数执行后不向变量添加数据

问题描述

我正在调用一个 AJAX 函数来从服务器获取数据,并将该数据添加到 userLayer我的 ajax 函数中的变量中。因此,一旦调用被执行,它应该在其中包含数据。但是,它返回undefined,当我这样做时console.log(map.hasLayer(userLayer), "check if layer exists"),它false在技术上应该返回时返回true,这意味着 AJAX 函数或我正在进行的 AJAX 调用中有问题。我也在使用 Promise。下面是代码:

调用 addUserLayerTreemail AJAX 函数

userLayer = this.addUserLayerTreemail(
            $loadingContent,
            $loadingDiv,
            treeLayers,
            map,
            heritage_cluster_layer_view_18,
            flowering_cluster_layer_view_18,
            IMP_FIELDS,
            suggestion,
            userPlottedLayerView18Options,
            userLayer,
            $speciesError
          ).then( function(response){

            //the map should have userLayer after the ajax call, but it returns false
            console.log(map.hasLayer(userLayer), "check if layer exists")
            setSearchState(true);
            $mapSearch.blur();
          }).catch(function(err){
            console.log("error caught", err)
          });

定义 addUserLayerTreemail AJAX 函数

addUserLayerTreemail(
  $loadingContent,
  $loadingDiv,
  treeLayers,
  map,
  heritage_cluster_layer_view_18,
  flowering_cluster_layer_view_18,
  IMP_FIELDS,
  suggestion,
  userPlottedLayerView18Options,
  userLayer,
  $speciesError
) {

  $loadingContent.text('Loading Search Results');
  addClass($loadingDiv, 'show');
  removeClass($speciesError, 'show-error');


  // remove all layers in case they are present
  for (let layer in treeLayers) {
    if (map.hasLayer(treeLayers[layer])) {
      treeLayers[layer].removeFrom(map);
    }
  }
  if (map.hasLayer(heritage_cluster_layer_view_18)) {
    heritage_cluster_layer_view_18.removeFrom(map);
  }
  if (map.hasLayer(flowering_cluster_layer_view_18)) {
    flowering_cluster_layer_view_18.removeFrom(map);
  }

  if(map.hasLayer(userLayer)) {
    userLayer.removeFrom(map);
  }

  // let checked = this.getCurrentFilter(),
  const featureType = 'USERTREE';

  let queryString = '';

  suggestion = suggestion.toLowerCase();

  let $selectedOptionSearch = $('.mapFilterBtns.is-active').data('value');
  let all_trees="";

  console.log($('#mapSearch').val(), "searched value")
  let searchText= $('#mapSearch').val();

  let configData = {"searchText": searchText, "searchType" : $selectedOptionSearch};

    console.log("config", configData)


    return new Promise(function(resolve, reject){

      $.ajax({
        url: "../apis/Search",
        method: 'GET',
        dataType: 'json',
        data : configData,
        contentType: 'application/json',
        success: response => {
          console.log("ajax response in the ajax function",response);

          resolve(response);

            let conditionalVal = " or ";
          let treeID = "";

          for(let i=0; i<response.length; i++) {
            treeID = response[i]['TreeID']
            if(i==0) {
                all_trees = `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
            } else {
                all_trees += conditionalVal + `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
            }
          }
          console.log("all trees here",all_trees);
          queryString = all_trees + ` and Actual_Tree_Type like '%${featureType}%'`;
          let isSearch = true;

          let layerOptions = $.extend(
            {
              where: queryString
            },
            userPlottedLayerView18Options
          );

          layerOptions.url = mapLayers.userPlantedLayer;
          
          userLayer = L.esri.featureLayer(layerOptions);
          userLayer
            .query()
            .where(queryString)
            .run((err, featureCollection, response) => {
              
                //adding the data to userLayer and then adding userLayer to map here
                userLayer.addTo(map);
            });

          //Returning the userLayer here
          return userLayer;
              },
              error : function(err){
                reject(err, "printing error here");
              }
      });
    })
}

标签: jqueryajaxpromise

解决方案


推荐阅读