点击按钮调用JSONP API无法刷新随机名言的问题求助

嘿，我懂你的困扰——第一次点击按钮能拿到新鲜的随机名言，但之后再点就一直显示同一句，对吧？这其实是浏览器的缓存机制在搞怪！

问题根源 #

JSONP本质是通过动态创建<script>标签来请求资源，而浏览器默认会缓存GET请求的结果。你的请求URL每次都完全一样，浏览器就会直接返回之前缓存的响应，根本没去服务器请求新的名言。

两种解决方案，任选其一就行： #

方案1：给URL加随机参数（最简单）

在请求URL末尾加一个每次都不一样的参数，比如当前时间戳，让浏览器认为这是全新的请求，就不会用缓存了。修改你的jQuery代码如下：

$(document).ready(function() {
  // 直接绑定点击事件就行，.each循环没必要（#click是唯一ID）
  $("#click").on("click", function() {
    // 加入时间戳参数`_=`，确保每次URL都不同
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?&_=" + Date.now(), function(key) {
      $("#quote span").replaceWith(key[0].content + "<p>— " + key[0].title + "</p>");
    });
  });
});

Date.now()会生成当前时间的毫秒数，每次点击这个值都不一样，完美绕过缓存。

方案2：用$.ajax显式禁用缓存

如果觉得加参数不够优雅，也可以改用完整的$.ajax写法，明确设置cache: false：

$(document).ready(function() {
  $("#click").on("click", function() {
    $.ajax({
      url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?",
      dataType: "jsonp",
      cache: false, // 强制禁用缓存
      success: function(key) {
        $("#quote span").replaceWith(key[0].content + "<p>— " + key[0].title + "</p>");
      }
    });
  });
});

额外小修正 #

顺便提一句，你原代码里有个小问题：$(document).ready()最后多了一个多余的});，还有HTML里的<Title>标签应该放在<head>内部，现在的位置不符合规范，不过这两个不影响功能，顺手改了更好~

现在再点击按钮，每次都会真正调用API获取新的随机名言啦！

内容的提问来源于stack exchange，提问作者Gaurav Thantry