Используя jQuery, как я могу сохранить результат вызова функции $ .ajax для повторного использования?

Question

Спасибо, что прочитали это.

Я полагаю, что это действительно вопрос javascript, и мой заголовок, вероятно, не соответствует сути того, что я пытаюсь сделать, но я хочу сохранить результат моего запроса ajax в глобальной переменной. Это позволило бы мне проверить var перед выполнением вызова ajax ... и избежать повторных вызовов ajax для одних и тех же данных. Мне нужно иметь возможность передавать имя переменной из события click через функцию populateSelect в функцию ajaxCall.

Кажется, я мог бы передать функцию в качестве параметра, но я не смог заставить эту работу.

Мне нравится включать рабочие примеры в мои вопросы, но в этом случае задержка при обращении к серверу является частью проблемы.

Спасибо

$('#getSelectOptions').bind("click", function() {
 populateSelect(this);
});

function populateSelect(whatWasClicked) {
 var thisSelect = $(whatWasClicked).parents("div").find("select") ;

 var before = function() { $(loading).show() ;  } ;
 var complete = function() { $(loading).hide() ;  } ;
 var data = {'_service' : 'myService', '_program' : 'myProgram' } ;
 var error = function(){alert("Error"); } ;
 var success = function(request) { $(thisSelect).html(request) ; };
 var waitTime = 20000 ;

 ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
}

function ajaxCall(elementToPopulate, waitTime, whatToDoBeforeAjaxSend,
                  whatToDoAfterAjaxSend, dataToSendToTheServer, 
                  whatToDoAfterSuccess, whatToDoAfterError) {
 $.ajax({   
  type: "post", 
  url: "http://myURL/cgi-bin/broker",   
  dataType: "text", 
  data: dataToSendToTheServer, 
  timeout: waitTime, 
  beforeSend: whatToDoBeforeAjaxSend, 
  error: whatToDoAfterError(request),
  success: whatToDoAfterSuccess(request)
 });
}

РЕДАКТИРОВАТЬ Дальнейшее образование в том, как написать хороший вопрос ... Я должен был упомянуть, что я вызываю populateSelect для заполнения нескольких выборок ... поэтому мне нужен способ ссылки на результаты для каждого выбора

Answer 1

Похоже, что в приведенном вами примере у вас есть только один тип запроса AJAX, POST каждый раз по одному и тому же URL с одними и теми же данными. Если это так, вам просто нужно что-то вроде:

var brokerResponse = null;  // <-- Global variable

function populateSelect(whatWasClicked) {
 var thisSelect = $(whatWasClicked).parents("div").find("select") ;

 if (!brokerResponse) {  // <-- Does an old response exist? If not, get one...
   var before = function() { $(loading).show() ;  } ;
   var complete = function() { $(loading).hide() ;  } ;
   var data = {'_service' : 'myService', '_program' : 'myProgram' } ;
   var error = function(){alert("Error"); } ;

   var success = function(request) {  // <-- Store the response before use
      brokerResponse = request; 
      $(thisSelect).html(brokerResponse);
   };
   var waitTime = 20000 ;

   ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
 }
 else {   // <-- If it already existed, we get here.
   $(thisSelect).html(brokerResponse);  // <-- Use the old response
 }
}

Если у вас есть несколько возможных элементов для whatWasClicked, каждый из которых нуждается в отдельном кэшированном ответе AJAX, тогда вам нужно иметь некоторую строку, с помощью которой можно идентифицировать whatWasClicked, и использовать ее для хранения нескольких значений в вашей глобальной переменной. Например, если у вас есть уникальный id на whatWasClicked, это будет работать:

var brokerResponse = {}; // Global variable is a simple object

function populateSelect(whatWasClicked) {

 var whatWasClickedId = $(whatWasClicked).attr('id'); // Get the unique ID
 var thisSelect = $(whatWasClicked).parents("div").find("select") ;

 if (!brokerResponse[whatWasClickedId]) {  // Check that ID for a response
   var before = function() { $(loading).show() ;  } ;
   var complete = function() { $(loading).hide() ;  } ;
   var data = {'_service' : 'myService', '_program' : 'myProgram' } ;
   var error = function(){alert("Error"); } ;
   var success = function(request) {

      brokerResponse[whatWasClickedId] = request; // Using ID
      $(thisSelect).html(brokerResponse);
   };
   var waitTime = 20000 ;

   ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
 }
 else {
   $(thisSelect).html(brokerResponse[whatWasClickedId]); // Etc...
 }
}

Answer 2

jQuery имеет метод $ .data, который вы можете использовать для хранения / извлечения элементов, связанных с любым элементом на странице.

//e.g. create some object
var inst = {};
inst.name = 'My Name'

var target = $('#textbox1');

//save the data
$.data(target, 'PROP_NAME', inst);

//retrieve the instance
var inst =  $.data(target, 'PROP_NAME');

Answer 3

Область видимости JavaScript такова, что если вы только что объявили глобальную переменную, вы сможете получить к ней доступ из функции успеха ajax и функции click.

var _global_holder = null;
$('#getSelectOptions').bind("click", function() {
 if(_global_holder==null) { whatever }
 populateSelect(this);
});

function populateSelect(whatWasClicked) {
 if(_global_holder !== null) {
    whatever
  } else { whatever else }

 ajaxCall(thisSelect, waitTime, before, complete, data, success, error ) ;
}

function ajaxCall(elementToPopulate, waitTime, whatToDoBeforeAjaxSend,
                  whatToDoAfterAjaxSend, dataToSendToTheServer, 
                  whatToDoAfterSuccess, whatToDoAfterError) {
...
}