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.

理想情况下，当用户切换日期时，Flask后端可以立即获取通过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

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:

使用Javascript的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.

在javascript中，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确定可用性并相应地做出响应。XHR与AJAX有关，AJAX代表异步Javascript和XML。

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

您可以使用AJAX调用来发送请求，而无需刷新页面。