JQuery调用API并根据选择框更新URL后JSON数据无法显示的问题

我帮你排查出了几个导致API数据无法正常显示的问题，咱们一步步来解决：

核心问题分析 #

1. 变量未初始化：你定义的visitors、uniq_visitors等变量一开始是undefined，直接累加数值会变成NaN，自然无法显示有效数据。
2. 循环赋值错误：循环里的指标对应关系搞混了（比如uniq_pageviews错误累加了a而不是d），导致计算结果完全不对。
3. 缺少初始调用：页面加载完成后没有主动调用datePeriod()，所以默认的30天数据不会自动渲染。
4. 无错误处理：AJAX请求失败时没有任何提示，不方便排查问题。

修正后的完整代码 #

HTML部分（补充初始调用） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select name="DateSelector" id="DateSelector" onchange="datePeriod();"> 
  <option selected value="30">Last 30 Days</option> 
  <option value="90">Last 90 Days</option> 
  <option value="365">Last 365 Days</option> 
</select> 
<span id="DateShow"></span> 
<p id="visitors"></p> 
<p id="uniq_visitors"></p> 
<p id="pageviews"></p> 
<p id="uniq_pageviews"></p> 
<p id="actions"></p> 
<p id="outlinks"></p> 
<p id="bounces"></p> 
<p id="avgtime"></p>

<script>
// 页面加载完成后自动调用一次，渲染默认30天的数据
$(document).ready(function() {
  datePeriod();
});
</script>

JavaScript部分（修复变量初始化、赋值错误和添加错误处理） #

function datePeriod() { 
  let datePeriod = $("#DateSelector").val(); 
  $("#DateShow").text(`Last ${datePeriod} Days`); // 优化显示文本更直观

  // 初始化所有统计变量为0，避免NaN问题
  let visitors = 0; 
  let uniq_visitors = 0; 
  let pageviews = 0; 
  let uniq_pageviews = 0; 
  let actions = 0; 
  let outlinks = 0; 
  let bounces = 0; 
  let avgtime = 0; 

  $.getJSON(`https://discovrbookings.innocraft.cloud/?module=API&method=API.get&format=json&idSite=2&period=day&date=last${datePeriod}&token_auth=68aa5bd12137f13255dcb98794b65dff`, data => { 
    // 遍历API返回的日期数据
    $.each(data, (date, metrics) => { 
      // 正确累加对应指标，用||0处理可能的空值
      visitors += metrics.nb_visitors || 0; 
      uniq_visitors += metrics.nb_uniq_visitors || 0; 
      pageviews += metrics.nb_pageviews || 0; 
      uniq_pageviews += metrics.nb_uniq_pageviews || 0; 
      actions += metrics.nb_actions || 0; 
      outlinks += metrics.nb_outlinks || 0; 
      bounces += metrics.bounce_count || 0; 
      avgtime += metrics.avg_time_on_site || 0; 
    }); 

    // 更新页面显示，添加描述文本让内容更清晰
    $("#visitors").text(`Total Visitors: ${visitors}`); 
    $("#uniq_visitors").text(`Unique Visitors: ${uniq_visitors}`); 
    $("#pageviews").text(`Total Pageviews: ${pageviews}`); 
    $("#uniq_pageviews").text(`Unique Pageviews: ${uniq_pageviews}`); 
    $("#actions").text(`Total Actions: ${actions}`); 
    $("#outlinks").text(`Total Outlinks: ${outlinks}`); 
    $("#bounces").text(`Total Bounces: ${bounces}`); 
    $("#avgtime").text(`Average Time on Site: ${avgtime} seconds`); 
  })
  // 添加错误处理，方便调试API请求问题
  .fail(function(jqXHR, textStatus, errorThrown) {
    console.error("API请求失败:", textStatus, errorThrown);
    alert("数据加载失败，请稍后重试");
  }); 
} 

关键修改说明 #

• 变量初始化：所有统计变量一开始设为0，确保累加时不会出现NaN。
• 正确的指标映射：直接通过metrics.xxx访问每个日期的指标，避免循环里的变量混淆，同时用|| 0处理可能的空值。
• 初始调用：通过$(document).ready()在页面加载完成后自动渲染默认数据。
• 错误处理：添加.fail()捕获请求失败的情况，方便排查API访问问题。
• 优化显示：给每个统计项添加描述文本，让页面内容更清晰易懂。

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