如果请求已完成并且数据可用，则不会在ajax调用期间执行数据库查询请求

Question

我在我的视图中有一个按钮，当单击此按钮时会触发对数据库数据的ajax请求。然后我将数据显示在我的页面中。我希望能够隐藏数据，如果再次点击该按钮并显示它，如果它再次点击等等。我不想每次点击它时执行新的数据库查询。

因此，例如，我的要求是这样的：

$.ajax({ 

      url: '../route/button, 
      type: 'get', 
      data: {_method: 'get', _token: token}, 
      success: function (data) { 

      // bla bla get data from DB and insert in div 

     }); 

所以一旦我点击我的资料，然后我再次单击该按钮，我想切换（）; div和数据从页面中消失，但如果再次单击，我想再次切换div并显示已存在的数据，而无需再次执行数据库查询。 任何线索？

Answer 1

您必须保存ajax请求中的数据。然后每次点击按钮时，检查是否保存了数据。一个例子见this fiddle。

;(function() { 
    var data = null, 
     $output = $('#output'); 
    $output.hide(); 
    $('#button').on('click', function() { 
    if (data === null) { 
     // ajax request 
     data = { 
      foo: 'bar' 
     }; 
     console.log('fetching data'); 
     // populate table with data 
    } 
    $output.toggle(); 
    }); 
})();