使用jQuery+JSONP调用随机Quote API无法获取随机内容的问题

我太懂这种挫败感了——Postman里点一下换一句新名言，到自己网页上就钉死在默认内容不动！别慌，咱们拆解问题一步步搞定它。

问题根源拆解 #

1. 浏览器GET请求缓存坑：JSONP本质是发起GET请求，浏览器会自动缓存相同URL的请求结果。你每次点击按钮用的都是同一个URL，浏览器直接掏出缓存的旧数据，自然不会更新。
2. 代码语法小错误：你的代码末尾多了两个});，虽然部分浏览器可能容错，但这会导致JS执行逻辑不严谨，说不定还会悄悄影响事件绑定。
3. 冗余的遍历操作：如果#click是单个按钮，完全没必要用each遍历绑定事件，直接绑定就行，多此一举反而增加复杂度。

修正后的完整可运行代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#click").on("click", function() {
    // 加个时间戳参数，让每次请求的URL都不一样，彻底绕开浏览器缓存
    const cacheBuster = new Date().getTime();
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?&_=" + cacheBuster, function(quoteData) {
      // 用html()更新内容，比replaceWith更稳妥，不会破坏容器结构
      $("#quote").html(quoteData[0].content + "<p>— " + quoteData[0].title + "</p>");
    });
  });
});
</script>

<!-- 配套的页面结构示例 -->
<button id="click">点击获取随机名言</button>
<div id="quote">
  <span>点击按钮解锁名言~</span>
</div>

核心改进点说明 #

• 缓存破解：在URL末尾追加&_=+时间戳，每次请求的URL都会生成唯一值，浏览器再也不会返回缓存的旧结果。
• 语法修正：去掉冗余的each调用和多余的闭合符号，代码更简洁规范，避免潜在的执行错误。
• DOM更新优化：把replaceWith换成html()，只更新容器内的内容，不会替换掉#quote容器本身，页面结构更稳定。

额外小提示 #

如果还是偶尔出问题，可以检查下API参数是否符合v4版本要求——不过根据你提供的文档，filter[orderby]=rand和filter[posts_per_page]=1都是合法参数，核心问题还是浏览器缓存在搞鬼。

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