I'm trying to build a booking application, and I'd like to submit the date on the frontend to the backend without having to use form submissions and constantly refresh the page.

我正在尝试构建一个预订应用程序，我希望在前端将日期提交到后端，而不必使用表单提交和不断刷新页面。

Ideally, as the user toggles through the dates, Flask backend can immediately pick up the new date value calculated through JS, query the appropriate database to pull availability, then render back to the webpage available times. Is there a way to accomplish this? I've loosely heard about Ajax and Fetch API, but I'm not sure if that's applicable here.

理想情况下，当用户切换日期时，FlaskBackend可以立即获取通过JS计算的新日期值，查询相应的数据库以拉取可用时间，然后呈现回网页可用时间。有什么办法可以做到这一点吗？我大致听说过AJAX和FETCH API，但我不确定它在这里是否适用。

Please let me know if there's any other information needed to clarify my question - I have the following JavaScript and HTML to accompany (image attached below as well):

如果有任何其他信息需要澄清我的问题，请让我知道-我有以下的JavaScript和HTML随附(图片也附在下面)：

Javascript

JavaScript

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

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

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

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 %}

Use Javascript's XMLHttpRequest:

使用Java脚本的XMLHttpRequest：

In javascript, XHR is used to send data from the client to the server. The server can also respond to the client with information such as availability data.

在Java脚本中，XHR用于将数据从客户端发送到服务器。服务器还可以用诸如可用性数据之类的信息来响应客户端。

Here is a basic example of XHR:

以下是XHR的一个基本示例：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

[example from: W3 schools - XML HTTP Request]

[示例：W3学校-XML HTTP请求]

It's unclear exactly how you would want implement this, but you could make a function like check_if_datetime_is_available, that makes a XHR with a date and time to the backend, which determines availability and responds accordingly. XHR is related to AJAX which stands for Asynchronous Javascript And XML.

目前还不清楚您希望如何实现这一点，但您可以使用一个类似check_if_Datetime_is_Available的函数，该函数使XHR具有到后端的日期和时间，后者确定可用性并做出相应的响应。XHR与AJAX有关，AJAX代表异步脚本和XML。

You can use AJAX call which sends the request without refreshing the page.

您可以使用在不刷新页面的情况下发送请求的AJAX调用。