Flask Web应用Fetch响应缺失dateStr字段的修复方案咨询

问题背景 #

开发Flask Web应用时，前端JavaScript发送数据到服务器后，服务器返回的响应中缺失dateStr字段，仅返回{'curr_size': '1', 'max_size': '5', 'recurring': 'on'}。尝试通过全局变量传递dateStr仍无效，需定位并修复问题。

问题代码 #

<!--flatpickr date picker-->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
  let globalVariable = null

  config = {
    enableTime: true,
    dateFormat: "H:i d-m-Y",
    altInput: true,
    altFormat: "F j, Y h:i K",
    minDate: "2024-01",
    onValueUpdate: function (selectedDates, dateStr, instance) {
      globalVariable = dateStr
      document.getElementById('current_availability').innerHTML = `<h3> Select class information:</h3>
        <div id='new_container'>
            <form>
                    <input type='text' id='curr_size'>Current class size</input>
                    <input type='text' id='max_size'>Maximum class size</input>
                    <input type='checkbox' id='recurring'>Recurring</input>
                    <button id='new-form-button' onclick="takeValues(${dateStr})"">
            </form>
        </div>`;

  document.getElementById("new-form-button").addEventListener("click", function (event) {
    event.preventDefault()
  });
 }
}
flatpickr("input[type=datetime-local]", config);

function takeValues(globalVariable) {
    var send_data = {
      curr_size: document.getElementById('curr_size').value,
      max_size: document.getElementById('max_size').value,
      recurring: document.getElementById('recurring').value,
      dateStr: globalVariable,
    }
const url = "{{ url_for('views.fetch_schedule') }}"
fetch(url, {
  cache: "no-cache",
  method: "POST",
  headers: new Headers({
    "Content-Type": "application/json"
  }),
  credentials: "include",
  body: JSON.stringify(send_data),
})

  .then((resp) => {
    if (!resp.ok) throw new Error('was not a valid response');
    return resp.text();
  })
  .then((dataobj) => {
    document.getElementById('current_availability').innerHTML = `<h3>${dataobj}</h3>`;
  })
  .catch((err) => {
    console.warn(err.message);
  });
}

</script>

{% endblock %}

修复步骤 #

1. 修复onclick参数的字符串传递错误 #

动态生成按钮时，dateStr作为字符串直接传入takeValues会被解析为JS变量，导致语法错误，需用单引号包裹：

// 修正按钮的onclick属性，添加单引号包裹dateStr
<button id='new-form-button' onclick="takeValues('${dateStr}')">提交</button>

同时移除按钮标签末尾多余的双引号。

2. 优化全局变量使用（可选，提升可靠性） #

避免函数参数与全局变量同名覆盖，直接使用全局变量传递dateStr：

function takeValues() {
    var send_data = {
      curr_size: document.getElementById('curr_size').value,
      max_size: document.getElementById('max_size').value,
      recurring: document.getElementById('recurring').checked ? 'on' : 'off', // 用checked状态判断checkbox值更准确
      dateStr: globalVariable, // 直接调用全局变量
    }
    // 后续fetch逻辑不变
}

对应的按钮onclick改为：

<button id='new-form-button' onclick="takeValues()">提交</button>

3. 服务器端确保返回dateStr字段 #

检查Flask的fetch_schedule视图函数，确认解析请求并返回dateStr：

from flask import request, jsonify

@app.route('/fetch_schedule', methods=['POST'])
def fetch_schedule():
    data = request.get_json()
    # 业务逻辑处理...
    return jsonify({
        'curr_size': data.get('curr_size'),
        'max_size': data.get('max_size'),
        'recurring': data.get('recurring'),
        'dateStr': data.get('dateStr')  // 必须包含该字段
    })

4. 前端优化响应解析方式 #

将resp.text()改为resp.json()直接解析为对象，方便灵活展示数据：

.then((resp) => {
    if (!resp.ok) throw new Error('请求响应无效');
    return resp.json(); // 解析为JSON对象
})
.then((dataobj) => {
    document.getElementById('current_availability').innerHTML = `
        <h3>返回信息:</h3>
        <p>当前班级规模: ${dataobj.curr_size}</p>
        <p>最大班级规模: ${dataobj.max_size}</p>
        <p>是否重复: ${dataobj.recurring}</p>
        <p>日期: ${dataobj.dateStr}</p>
    `;
})

关键问题总结 #

• 动态生成的onclick未正确包裹字符串参数，导致dateStr未传递到函数
• 服务器端可能未将dateStr包含在响应中
• 前端响应解析方式可优化，避免直接展示原始文本

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