HTML单选按钮结合JavaScript调用API时JSON语法错误求助

核心问题分析 #

1. 单选按钮分组与取值错误：循环生成的所有单选按钮共用同一个id="activity_id"，getElementById只会返回第一个元素；且缺少name属性导致单选按钮无法互斥，用户可多选，最终获取的值大概率不正确。
2. 请求头与请求体不匹配：你设置的Content-Type是application/x-www-form-urlencoded，但请求体是JSON格式，API无法正确解析。
3. JSON语法错误：activity_id是字符串类型，但你直接拼接${active}未加引号，导致JSON结构破坏，这是报错的直接原因。

修复后的代码 #

HTML部分

<h2>Calculate Emissions</h2>
<div class="inputBox">
  <input type="number" id="passengers">
  <label>Enter Number of Passengers:</label>
</div>
<div class="inputBox">
  <input type="number" id="distance">
  <label>Enter Distance in km:</label>
</div>
{%for i in q %}
<div class="form-check">
  <!-- 添加name属性实现单选互斥，给每个按钮设置唯一id -->
  <input class="form-check-input" type="radio" name="activity_id" id="activity_{{loop.index}}" value="{{i.attributes}}">
  <!-- label的for属性对应当前单选按钮的id -->
  <label class="form-check-label" for="activity_{{loop.index}}" style="color: whitesmoke;">{{i.name}}</label>
</div>
{%endfor%}
<p></p>
<button type="button" onclick="get_details()" class="btn btn-success">Estimate</button>

JavaScript部分

<script>
function get_details(){
  // 获取输入值并转为数字类型
  let passenger_no = Number(document.getElementById('passengers').value);
  let distance = Number(document.getElementById('distance').value);
  // 获取选中的单选按钮值
  let active = document.querySelector('input[name="activity_id"]:checked')?.value;
  
  // 校验用户是否选择了活动类型
  if (!active) {
    alert('请选择一个活动类型');
    return;
  }

  fetch('https://beta4.api.climatiq.io/estimate', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer 7SFFXXXXSRJ63T8WZ2NADN0A',
      // 修改为正确的JSON类型请求头
      'Content-Type': 'application/json'
    },
    // 使用JSON.stringify生成请求体，避免手动拼接的语法错误
    body: JSON.stringify({
      "emission_factor": {
        "activity_id": active,
        "data_version": "^1"
      },
      "parameters": {
        "passengers": passenger_no,
        "distance": distance,
        "distance_unit": "km"
      }
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error('请求错误:', err);
  });
}
</script>

额外说明 #

• 使用JSON.stringify替代手动拼接JSON字符串，彻底避免引号、逗号等语法错误；
• 添加单选按钮选中校验，防止用户未选择就提交请求；
• 将数字输入转为Number类型，确保请求体参数类型符合API要求；
• 给每个单选按钮设置唯一id并匹配label的for属性，提升页面可访问性。

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