单击按钮时获取新的 JSON 对象 (jQuery)

Question

我是 webdev 的新手，我正在尝试构建一个 web 应用程序，只要单击按钮 #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

您的代码 100% 正确。碰巧浏览器正在缓存您正在访问的 url 的结果。我注意到 Codepen 正在缓存结果，当我用我计算机上的文件测试它时，我的浏览器也在缓存它。因此，在它第一次点击 URL 之后，它会按照 "Oh, I've already gone to this URL and I already know what the result is. So to save time, I'll just give it the same data as before."

的思路进行思考

为了解决这个问题（这可能被认为是 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 2

在您的 URL 中设置缓存错误。这是因为您一次又一次地获取相同的数据

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

Answer 3

正如其他人所指出的，这只是 codepen 上的缓存问题。

将此行添加到您的代码中以将缓存设置为 false：

$.ajaxSetup({ cache: false });

在实时环境中小心使用它，您不想用 cache:false 影响所有 ajax 请求。所以我建议您使用普通的 jQuery ajax 调用并将属性缓存设置为 false 仅针对此函数：

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

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) {

单击按钮时获取新的 JSON 对象 (jQuery)

Getting a new JSON object when clicking a button (jQuery)

javascript

jquery

json

quote