リクエストが既に完了し、データが利用可能な場合、ajaxコール中にデータベースクエリ要求を実行しない

Question

私のビューには、クリックするとデータベース上のデータに対するajaxリクエストがトリガーされるボタンがあります。それから、自分のページにデータを表示します。ボタンをもう一度クリックするとデータを非表示にして、もう一度クリックすれば表示できるようにしたい。私はそれをクリックするたびに新しいDBクエリを実行したくありません。

ので、たとえば私の要求は、このようなものです：私はデータを持ってクリックした後、その後、）私はもう一度ボタンをクリックして、私は（切り替えたいので

$.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とdataはページから消えますが、再度クリックするとdivをもう一度切り替えるだけで、DBクエリーをもう一度実行せずに既にそこにあるデータを表示したいのです。 手掛かりはありますか？

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(); 
    }); 
})();