如何无刷新将HTML元素值发送至Flask后端（预约系统场景）

需求描述 #

我正在开发一个预约应用，希望无需表单提交和频繁刷新页面，就能将前端的日期值提交至后端。理想状态是，当用户切换日期时，Flask后端能立即获取通过JS计算出的新日期值，查询对应数据库获取可用时段，再渲染回网页展示。我听说过Ajax和Fetch API，但不确定是否适用于此场景。

现有代码 #

JavaScript #

/* CALENDAR.HTML */
let date = new Date();
const dateToday = new Date();

let day = date.getDate();
let month = date.getMonth();
let year = date.getFullYear();

const months = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December",
];

let dateFormat = months[month] + " " + day + ", " + year;
if (document.getElementById("today")) {
  document.getElementById("today").innerHTML = dateFormat;
}

function addDays(date, days) {
  var result = new Date(date);
  result.setDate(result.getDate() + days);
  return result;
}

function dateFormatFunc() {
  day = date.getDate();
  month = date.getMonth();
  year = date.getFullYear();
  dateFormat = months[month] + " " + day + ", " + year;
  document.getElementById("today").innerHTML = dateFormat;
}

let datePlus1 = document.getElementById("datePlus1");
function Plus1() {
  date = addDays(date, 1);
  if (dateToday > date) {
    date = addDays(dateToday, 1);
    dateFormatFunc();
  } else {
    dateFormatFunc();
  }
}

let dateMinus1 = document.getElementById("dateMinus1");
function Minus1() {
  date = addDays(date, -1);
  if (dateToday > date) {
    return;
  } else {
    dateFormatFunc();
  }
}

if (datePlus1) {
  datePlus1.addEventListener("click", () => Plus1());
}

if (dateMinus1) {
  dateMinus1.addEventListener("click", () => Minus1());
}

HTML #

{% extends 'layout.html' %} {% block body %}
<div class="my-4 w-2/3 mx-auto">
    <h1 class="text-white font-bold text-center text-xl mb-1">{{ stylistName }}'s Calendar</h1>
  </div>
<div class="w-4/5 flex flex-col mx-auto"> 
<div class="text-xl flex items-center justify-center">
    <p id="dateMinus1" class="cursor-pointer select-none bg-white font-bold text-black rounded-full hover:bg-gray-300">&nbsp&nbsp&lt&nbsp&nbsp</p>
    <p id="today" class="text-white mx-6">Date</p>
    <p id="datePlus1" class="cursor-pointer select-none bg-white font-bold text-black rounded-full hover:bg-gray-300">&nbsp&nbsp&gt&nbsp&nbsp</p>
</div>
<ul class="text-black text-center">
<li class="bg-white rounded-md my-2">9:00am</li>
<li class="bg-white rounded-md my-2">9:30am</li>
<li class="bg-white rounded-md my-2">10:00am</li>
<li class="bg-white rounded-md my-2">10:30am</li>
</ul>
</div>

{% endblock %}

解决方案 #

Fetch API完全适配这个场景，能实现前后端异步交互，无需刷新页面即可更新时段列表。以下是具体实现步骤：

1. 修改前端JavaScript，添加Fetch请求 #

在现有JS中新增获取可用时段并更新页面的函数，同时在日期更新后触发该请求：

// 新增：向后端请求可用时段并更新页面
function fetchAvailableSlots() {
  // 将日期转为后端易处理的YYYY-MM-DD格式
  const formattedDate = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
  
  // 发送Fetch请求，携带日期和发型师名称参数
  fetch(`/get_available_slots?date=${formattedDate}&stylist={{ stylistName }}`)
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.json();
    })
    .then(data => {
      const slotsList = document.querySelector('ul');
      // 清空现有时段列表
      slotsList.innerHTML = '';
      // 生成新的时段列表项
      data.slots.forEach(slot => {
        const li = document.createElement('li');
        li.className = 'bg-white rounded-md my-2';
        li.textContent = slot;
        slotsList.appendChild(li);
      });
    })
    .catch(error => console.error('获取可用时段出错:', error));
}

// 修改dateFormatFunc，更新日期后自动触发时段请求
function dateFormatFunc() {
  day = date.getDate();
  month = date.getMonth();
  year = date.getFullYear();
  dateFormat = months[month] + " " + day + ", " + year;
  document.getElementById("today").innerHTML = dateFormat;
  // 新增：请求并更新时段
  fetchAvailableSlots();
}

2. 新增Flask后端API路由 #

在Flask应用中添加处理时段查询的路由，接收前端传递的日期和发型师参数，查询数据库后返回JSON格式的可用时段：

from flask import Flask, jsonify, request, render_template
# 导入你的数据库操作模块，替换为实际模块名
# import your_db_module

app = Flask(__name__)

# 原有日历页面路由
@app.route('/calendar/<stylist_name>')
def calendar(stylist_name):
    return render_template('calendar.html', stylistName=stylist_name)

# 新增：获取可用时段的API路由
@app.route('/get_available_slots')
def get_available_slots():
    # 获取前端传递的参数
    target_date = request.args.get('date')
    stylist_name = request.args.get('stylist')
    
    # 此处替换为实际数据库查询逻辑
    # 示例：从数据库查询该发型师指定日期的可用时段
    # available_slots = your_db_module.query_available_slots(stylist_name, target_date)
    
    # 临时模拟数据，实际开发中替换为数据库查询结果
    available_slots = ["9:00am", "10:30am", "1:00pm", "2:30pm"]
    
    # 返回JSON格式的时段数据
    return jsonify({'slots': available_slots})

if __name__ == '__main__':
    app.run(debug=True)

3. 关键注意事项 #

• 日期格式一致性：前端传递的日期格式要和数据库中存储的日期格式匹配，示例中使用YYYY-MM-DD是通用标准格式。
• 错误处理：Fetch请求中添加了基础错误处理，可根据需求扩展（比如在页面显示错误提示）。
• 数据库查询：将示例中的模拟数据替换为实际的数据库查询逻辑，确保获取真实的可用时段。

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