Получение нового объекта JSON при нажатии кнопки (jQuery)

Question

Я новичок в webdev, я пытаюсь создать веб-приложение, которое получает новую цитату всякий раз, когда нажимается кнопка #getQuote.

Это мой мой JS код:

$(document).ready(function() { 
    // function get_new will get a new JSON object  
    function get_new() { 
     $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) { 
      var quote = a[0].content.slice(3, -6); 
      var author = '- ' + a[0].title; 

      var my_quote = $('<i class="fa fa-quote-left"></i> ' + quote + ' <i class="fa fa-quote-right"></i>'); 

      $('.quoteBody').html(my_quote); 
      $('.quoteAuthor').html(author); 

      // tweet the quote 
      $("#tweet").click(function() { 
       $(this).attr('href', 'https://twitter.com/intent/tweet?text=' + '"' + quote + '" - ' + author).attr("target", "_blank"); 
      }); 
     }); 
    } 

    // calling function to appear as default 
    get_new(); 
    // when clicked, get new quote 
    $('#getQuote').click(function() { 
     get_new(); 
    }); 
}); 

Любая помощь будет оценили ребята.

Вот codepen для всех, кто интересуется: https://codepen.io/tadm123/pen/YNvdyr

Answer 1

Как указывали другие, это просто проблема с кешем в кодефене.

Добавьте эту строку в код, чтобы установить кэш неверно:

$.ajaxSetup({ cache: false }); 

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

$.ajax({ 
    cache: false, 
    url: "/path/to/file.json", 
    dataType: "json", 
    success: function(data) { 
     ... 
    } 
}); 

Answer 2

Ваш код 100% правильно. Так получилось, что браузер кэширует результат URL-адреса, к которому вы обращаетесь. Я заметил, что Codepen кэшировал результат, и мой браузер также кэшировал его, когда я тестировал его с файлами на своем компьютере. Таким образом, после того, как он впервые попадает в этот URL, он думает о чем-то вроде «О, я уже перешел к этому URL-адресу, и я уже знаю, в чем результат. Поэтому, чтобы сэкономить время, я просто дам ему то же самое как и раньше ».

Для борьбы с этим (это можно было бы считать Hacky?), Добавить текущее время в конце URL (потому что время всегда будет отличаться) как так:

function get_new(){ 
    var currentDate = new Date().getTime(); // create new date 
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&date=" + currentDate, function(a) { // add it to end of URL 
     var quote = a[0].content.slice(3,-6); 
     var author = '- ' + a[0].title; 
     var my_quote = $('<i class="fa fa-quote-left"></i> ' + quote + ' <i class="fa fa-quote-right"></i>'); 

     $('.quoteBody').html(my_quote); 
     $('.quoteAuthor').html(author); 

     // tweet the quote 
     $("#tweet").click(function(){ 
      $(this).attr('href', 'https://twitter.com/intent/tweet?text='+ '"'+ quote + '" - ' + author).attr("target","_blank"); 
     }); 
    }); 
} 

Также иногда результат будет приходите медленно, но я думаю, что это из-за скорости сервера, с которой вы запрашиваете цитаты. Другая проблема может заключаться в том, чтобы показать загрузчик, пока он получает цитату с сервера.

Answer 3

Поместите кеш в свой URL. Это связано с тем, что вы снова и снова получаете одинаковые данные.

https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&cache=false&callback 

Answer 4

Закрыть ... чтобы заставить его работать с консолью закрыта, $.ajaxSetup({ cache: false }); Ждут» т работы. Однако рандомизация URL-адреса делала:

$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=&cache="+Math.random(), function(a) {