Question

我创建了一个简单的页面，显示来自QuotesOnDesign API的随机引号。但是，单击时我的“New Quote”元素不会触发E:\dir1\Logs\dir2\1998-12-23 message.txt功能。这是我的代码的链接：

CodePen Random Quote

我怀疑这与jQuery有关，因为Chrome控制台显示错误，提到它拒绝加载脚本（指jQuery）。奇怪的是，当我在Chrome中打开开发人员工具时点击“新报价”，它就可以了！

Answer 1

首次调用API时，浏览器会缓存响应，并在将来的调用中重复使用该响应。您可以通过向URL添加缓存区来解决此问题。

打开控制台时它起作用的原因是因为你可能设置了禁用缓存（当DevTools打开时）选项。

function getQuote() {
  var cb = Math.round(new Date().getTime() / 1000);
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=" + cb, function(a) {
    $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>");
  });
}

Working CodePen

Answer 2

您可以完全摆脱功能调用，并尝试$.ajax尝试：

$(".button").on("click", function(e) {
  e.preventDefault();
  $.ajax({
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(a) {
        $(".quote-text").html(a[0].content + "<p>— " + a[0].title + "</p>")
      },
      cache: false
   });
});

使用cache: false，您可以防止每次调用缓存，因此每次按预期点击按钮时内容都会更改。

CodePen和jQuery的问题

2 个答案: