Flask Fetch 响应解析错误：正确提取 JSON 数据并安全渲染到页面

本文解决 flask + javascript 中 `fetch` 返回原始 json 字符串而非解析后对象的问题，避免页面被字符串字面量覆盖，并确保 `datestr` 等字段正确传递与使用。

在你当前的代码中，核心问题有两个层面：前端数据解析错误 和 后端字段缺失隐患。

首先，fetch().then(resp => resp.text()) 仅将响应体作为纯文本（如 ‘{“curr_size”:”1″,”max_size”:”5″,”recurring”:”on”}’）返回，而你直接将其插入 html：

document.getElementById('current_availability').innerHTML = `
${dataobj}
`;

这会导致浏览器把整个 jsON 字符串当作普通文本渲染（例如显示为 {“curr_size”:”1″,…}），而非解析为 JS 对象——因此 dateStr 看似“丢失”，实则是它根本没被后端返回（见下文），且前端也未尝试读取其属性。

✅ 正确做法是：使用 resp.json() 解析响应体，并结构化渲染
将 .then(resp => resp.text()) 替换为 .then(resp => resp.json())，后续即可安全访问 dataobj.dateStr、dataobj.curr_size 等字段：

.then((resp) => {   if (!resp.ok) throw new Error(`HTTP error! status: ${resp.status}`);   return resp.json(); // ← 关键修正：解析 JSON 响应体 }) .then((dataobj) => {   // ✅ 现在 dataobj 是 javaScript 对象，可安全取值   const dateInfo = dataobj.dateStr ? `for ${dataobj.dateStr}` : 'for selected date';   document.getElementById('current_availability').innerHTML = `     
class Availability ${dateInfo}:
     
       
Current size: ${dataobj.curr_size}
       
Max capacity: ${dataobj.max_size}
       
Recurring: ${dataobj.recurring === 'on' ? 'Yes' : 'No'}
     
   `; }) .catch((err) => {   console.error('Fetch failed:', err);   document.getElementById('current_availability').innerHTML =      '
Error loading availability
Please check browser console.
'; });

⚠️ 其次，dateStr 缺失的根本原因在后端逻辑
你的前端发送了 dateStr: globalVariable，但 Flask 路由 /fetch_schedule 的响应体中未包含该字段。请检查后端视图函数（如 views.fetch_schedule）是否真正接收并返回了 dateStr：

# 示例 Flask 视图（views.py） from flask import request, jsonify  @bp.route('/fetch_schedule', methods=['POST']) def fetch_schedule():     data = request.get_json()     # ✅ 必须显式读取并返回 dateStr     date_str = data.get('dateStr', 'N/A')      # 构建响应字典（确保包含所有前端依赖字段）     response_data = {         'curr_size': data.get('curr_size', '0'),         'max_size': data.get('max_size', '0'),         'recurring': data.get('recurring', 'off'),         'dateStr': date_str  # ← 关键：必须包含此项     }     return jsonify(response_data)

? 额外注意事项：

• 避免内联事件处理器：onclick=”takeValues(${dateStr})” 存在 xss 风险（若 dateStr 含特殊字符）且难以调试。建议改用事件委托或 addEventListener 动态传参；
• 表单字段值获取需规范： 标签内不能嵌套文字（如 Current class size 是无效 HTML），描述文字应使用 ；
• checkbox 值处理：.value 始终返回 “on”（默认）或空字符串，应使用 .checked 判断布尔状态：

  recurring: document.getElementById('recurring').checked ? 'on' : 'off'

通过以上修正，fetch 将正确解析 JSON 响应，dateStr 字段会稳定出现在前端对象中，页面也能以结构化、安全的方式动态更新内容。