点击按钮后网页无法显示API返回的名言，请求排查问题

嘿，我来帮你搞定这个点击按钮获取名言失效的问题～ 你的代码里有几个小细节需要调整，咱们来一步步修正：

问题分析与修正点 #

• URL参数格式错误：你代码里的&是HTML转义字符，在JavaScript字符串中应该直接用&，否则会被当成URL的一部分，导致API无法正确识别callback参数，JSONP请求直接失败。
• 重复设置AJAX配置：$.ajaxSetup放在点击事件里会每次点击都重复设置，建议移到事件外全局配置一次即可。
• 缺少错误处理：没加失败回调的话，请求出错你也不知道原因，很难排查问题。

修正后的完整代码 #

// 全局设置AJAX缓存，只执行一次
$.ajaxSetup({ cache: false });

// 绑定按钮点击事件
$(".btn").on("click", function() {
  // 修正URL参数的分隔符，并用jQuery自动处理JSONP回调
  $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&callback=?", function(data) {
    // 插入名言内容和作者
    $(".quote").html(data[0].content + " - " + data[0].title);
  })
  // 添加错误处理，方便调试
  .fail(function(jqXHR, textStatus, errorThrown) {
    $(".quote").html("获取名言失败：" + textStatus + " - " + errorThrown);
  });
});

额外说明 #

如果调整后还是无法获取名言，可能是quotesondesign的旧API已经停止维护了。这时候可以考虑更换其他公开的名言API，但先把代码里的明显错误修正后再测试哦。

内容的提问来源于stack exchange，提问作者Mostafa Jaafer Ulobeed