jquery向函数返回ajax响应和用户定义的变量

时间:2022-04-03 23:57:36

I am having an issue passing in a defined variable to a function from an ajax call. What should happen is on click of an element, it should pass the text of the clicked element to the function, do an ajax call which has nothing to do with the defined variable, return the variable and the data from the call to another function that renders the elements. When I get to the function that renders the html content, the variable is now undefined.

我有一个问题从一个定义的变量传递到一个来自ajax调用的函数。应该发生的是单击一个元素,它应该将被单击的元素的文本传递给函数,执行与已定义变量无关的ajax调用,将变量和数据从调用返回到呈现元素的另一个函数。当我到达呈现html内容的函数时,变量现在是未定义的。

My question is how can I send the ajax response data and a user defined variable that has no correlation to the ajax call to another function?

我的问题是,如何将ajax响应数据和用户定义的变量发送给另一个函数的ajax调用?

My JSON function:

我的JSON函数:

function getJSONP(url, data) {
  return $.ajax(url, {
    dataType: 'json',
    data: data
  });
}

My click event:

我的点击事件:

$('.day').on('click', function() {
  getTimes($(this).text());
});

My first function that does the ajax (this is where the selector returns a value):

我的第一个做ajax的函数(这是选择器返回值的地方):

function getTimes(selector) {
  console.log(selector);
  var eventDate = selector;

  getJSONP(CAL_API_URL).then(function(data) {
    data = _.valuesIn(data)[5][0];
    return data;
  }).then(appendTimes(eventDate));
}

My 2nd function that renders the HTML (here the selector is undefined):

呈现HTML的第二个函数(这里没有定义选择器):

function appendTimes(dates, selector) {
  console.log(selector);

  _.forEach(dates, function(k, v) {
    // Returns each event

    _.forEach(k, function(k2, v2) {
      // Returns multiple objects for each event

      var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
          timeId = k2.id;
      $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
    });
  });
}

2 个解决方案

#1


2  

In this case, if you switched appendTimes to only accept selector and have it return a function, the returned function will get called when data is available.

在这种情况下,如果您切换appendTimes只接受选择器并让它返回一个函数,那么当数据可用时,返回的函数将被调用。

function appendTimes(selector) {
  console.log(selector);
  return function (datas) {
    _.forEach(dates, function(k, v) {
      // Returns each event

      _.forEach(k, function(k2, v2) {
        // Returns multiple objects for each event

        var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
            timeId = k2.id;
        $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
      });
    });
  }
}

#2


1  

You are calling the method, not assigning a reference to it

您正在调用该方法,而不是为其分配引用

}).then(appendTimes(eventDate));

needs to use a closure or binding

需要使用闭包或绑定

}).then(function() { appendTimes(eventDate) });

also you can not return from a promise so the return data is useless.

同样,您不能从一个承诺返回,因此返回数据是无用的。

#1


2  

In this case, if you switched appendTimes to only accept selector and have it return a function, the returned function will get called when data is available.

在这种情况下,如果您切换appendTimes只接受选择器并让它返回一个函数,那么当数据可用时,返回的函数将被调用。

function appendTimes(selector) {
  console.log(selector);
  return function (datas) {
    _.forEach(dates, function(k, v) {
      // Returns each event

      _.forEach(k, function(k2, v2) {
        // Returns multiple objects for each event

        var availableTimes = k2.startTime + " (" + k2.open + " spots left!)",
            timeId = k2.id;
        $('.timeslot select').append('<option data-id="' + timeId +'">' + availableTimes + '</option>');
      });
    });
  }
}

#2


1  

You are calling the method, not assigning a reference to it

您正在调用该方法,而不是为其分配引用

}).then(appendTimes(eventDate));

needs to use a closure or binding

需要使用闭包或绑定

}).then(function() { appendTimes(eventDate) });

also you can not return from a promise so the return data is useless.

同样,您不能从一个承诺返回,因此返回数据是无用的。