点击按钮时获取一个新的JSON对象（jQuery）

Question

我是一个全新的网页开发者，我正在尝试构建一个网页应用程序，每当点击按钮#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();
    });
});

任何帮助都将不胜感激。

以下是代码pen，如有兴趣请点击链接： https://codepen.io/tadm123/pen/YNvdyr

- tadm123

---

它只是没有获取到新的引用，我已经更新并发布了CodePen上面的代码。 - tadm123

在 Chrome 的开发人员控制台打开时它运行良好，但关闭控制台后，它对我来说停止工作了... - chris g

jQuery.getJSON（url [，data] [，success]）。getJSON接受第3个参数，它是一个成功函数，使用它来检索错误消息。 - Sergio Alen

我遇到了和@chris一样的问题，很奇怪。 - Sergio Alen

我认为你的代码运行得很好。我认为Codepen总是显示相同的引用，因为它是一个开发工具，不需要浪费开发人员的时间在每次输入代码时下载新的JSON对象！在其他地方尝试你的代码，它会正常工作！ - ibrahim mahrir

Answer 1

你的代码是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");
        });
    });
}

有时候结果会出现较慢的情况，但我认为这是由于您请求报价的服务器速度造成的。另一个挑战可能是在从服务器获取报价时显示加载器。

- bwalshy

Answer 2

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

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

$.ajaxSetup({ cache: false });

在实际环境中使用时要小心，您不希望将所有的ajax请求都受到cache:false的影响。因此，我建议您使用普通的jQuery ajax调用，并将属性cache设置为false，仅针对此函数：

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

- Sergio Alen

---

$.get(url, { "_": $.now() }, function(data){ console.log(data); }); 请获取url，使用当前时间戳作为参数"_", 并将数据传递给回调函数进行处理。在控制台中输出数据。 - Damith Asanka

奇怪，我在Codepen中添加了$.ajaxSetup({ cache: false });但它不起作用，实际上我必须在CP环境中更改URL本身才能被识别。 - chris g

Answer 3

在你的URL中加入cache false。这是因为你一遍又一遍地获取相同的数据。

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

- Pramod Patil

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

- chris g