gpt4 book ai didi

How do I send the value of an HTML element to Flask backend without refreshing page?(如何在不刷新页面的情况下将HTML元素的值发送到FlaskBackend?)

转载 作者:bug小助手 更新时间:2023-10-24 20:20:19 31 4
gpt4 key购买 nike



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随附(图片也附在下面):


enter image description here


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调用。


更多回答

I'm reading online that this method is deprecated - is fetch typically the appropriate solution for things like this?

我在网上读到这种方法已被弃用--FETCH通常是适用于这种情况的解决方案吗?

@jrdaz14 As far as I know XHR is still supported in most browsers, with no plans to deprecate. What did you find? XHR is the "AJAX call" mentioned in another answer.

据我所知,大多数浏览器仍然支持@jrdaz14,没有弃用的计划。你发现了什么?XHR是另一个答案中提到的“AJAX调用”。

Can you please add more concrete info about how to do that to make it easier for @jrdaz14 to implement?

您能就如何做到这一点添加更多具体信息,以使@jrdaz14更容易实现吗?

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com