CodePen中getJSON仅IE正常运行，Chrome、Firefox无效，求原因及解决建议

嘿，我来帮你拆解下这个问题——你的名言生成器在IE能正常运行，但Chrome和Firefox里完全失效，核心原因和优化方案我整理如下：

核心问题分析 #

• URL参数转义错误（最关键）：你在$.getJSON的请求URL里用了&来分隔参数，但这是HTML中的转义字符，在JavaScript代码里应该直接使用&。Chrome和Firefox会严格将&当成URL的一部分发送给服务器，导致服务器无法正确解析请求参数，返回错误响应，最终代码失效。而IE对这类错误的容错性更高，自动把&解析成了&，所以能正常工作。
• 潜在的CORS问题（次要）：虽然quotesondesign的API通常支持跨域请求，但如果参数错误导致服务器返回非200状态码，浏览器的CORS机制会阻止读取响应内容，进一步让代码“看起来”完全失效。
• 计数器逻辑小瑕疵：你的counter++和span更新操作在getJSON的回调外面，这意味着不管请求成功还是失败，计数器都会增加——这大概率不是你想要的逻辑。

解决建议 #

1. 先修正URL参数 #

把URL里的&换成&，这是最核心的修复：

// 错误写法
// $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", ...)

// 正确写法
$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", ...)

2. 给请求加错误处理 #

用done()和fail()链式调用替代直接传回调，这样能在请求失败时排查问题，同时保证计数器只在成功时递增：

$.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1")
  .done(function(data){
    // 只在请求成功时更新内容和计数器
    $('p').html(data[0].content + '<footer>— '+ data[0].title +'</footer>');
    counter++;
    $('span').html(counter);
  })
  .fail(function(jqXHR, textStatus){
    console.error('获取名言失败:', textStatus);
    // 可以在这里给用户加个提示，比如 alert('抱歉，获取名言失败了')
  });

3. 优化HTML结构（可选） #

data[0].content本身已经是带<p>标签的HTML内容，再嵌套<p>会导致不符合规范的HTML结构，建议用<footer>或者<div>来包裹作者名，结构更合理：

$('p').html(data[0].content + '<footer>— '+ data[0].title +'</footer>');

4. 初始化触发点击（可选） #

如果希望页面加载时就显示第一条名言，取消注释你的触发代码即可：

$('button').trigger('click');

完整修正后的代码 #

$(function() { 
  const func = function(){ 
    let counter = 0; 
    return function(){ 
      $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1")
        .done(function(data){
          $('p').html(data[0].content + '<footer>— '+ data[0].title +'</footer>');
          counter++;
          $('span').html(counter);
        })
        .fail(function(jqXHR, textStatus){
          console.log('获取名言失败:', textStatus);
        });
    } 
  } 
  $('button').on('click', func()); 
  $('button').trigger('click'); 
});

内容的提问来源于stack exchange，提问作者Dima Hmel