如何将接口获取的ID填入meta重定向URL替代写入<p>标签？

修改JavaScript代码 #

把原来写入<p>标签的逻辑改成动态创建meta重定向标签，将获取到的ID插入到目标URL中：

$(document).ready(function() {
  // 从接口获取数据
  $.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/", function(data) {
    // 获取最新的Clip ID
    const latestClipId = data.Clips[0].Id;
    // 构造重定向URL，替换占位符为实际ID
    const redirectUrl = `https://api.omny.fm/orgs/${latestClipId}-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/`;
    
    // 创建meta重定向元素
    const metaRedirect = document.createElement('meta');
    metaRedirect.setAttribute('http-equiv', 'refresh');
    // 这里的数字改成你需要的延迟秒数，0表示立即重定向
    metaRedirect.setAttribute('content', `0; URL=${redirectUrl}`);
    
    // 将meta标签添加到head中
    document.head.appendChild(metaRedirect);
  });
});

调整HTML代码 #

不需要原来的<p id="table">标签了，简化后的HTML如下：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="./script.js"></script>
</body>
</html>

额外优化：添加错误处理 #

为了避免接口请求失败或返回数据异常导致出错，建议补充错误处理逻辑：

$(document).ready(function() {
  $.getJSON("https://api.omny.fm/orgs/56ccbbb7-0ff7-4482-9d99-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/", function(data) {
    if (data.Clips && data.Clips.length > 0) {
      const latestClipId = data.Clips[0].Id;
      const redirectUrl = `https://api.omny.fm/orgs/${latestClipId}-a88800f49f6c/programs/a49c87f6-d567-4189-8692-a8e2009eaf86/clips/`;
      
      const metaRedirect = document.createElement('meta');
      metaRedirect.setAttribute('http-equiv', 'refresh');
      metaRedirect.setAttribute('content', `0; URL=${redirectUrl}`);
      
      document.head.appendChild(metaRedirect);
    } else {
      console.error('未从API获取到有效剪辑数据');
    }
  }).fail(function() {
    console.error('API数据请求失败');
  });
});

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