Отправить запрос Flask с динамическим c URL и кнопками в HTML

Question

У меня есть веб-приложение, которое предоставляет пользователям прогнозы на футбол. A postgres db хранит прогнозы, и веб-сайт предоставляет их в соответствии с выбранной датой. При первой загрузке страницы база данных запрашивается в соответствии с сегодняшней датой. Если пользователь затем нажимает одну из трех кнопок на веб-сайте (вчера, сегодня и завтра, показанные как 2020-1-11, 2020-1-12, 2020-1-13), запросы должны соответственно измениться. Я также хотел бы изменить URL-адрес, например / this_date / 2020-1-12, чтобы затем можно было кэшировать каждый из запросов. Я понял, как создавать кнопки и отправлять запросы на публикацию, но все они возвращаются к 'http://127.0.0.1: 5000 / this_date / '. Есть идеи, как добиться динамического URL c? Я потратил бесчисленные часы на поиск этого и видел другие сообщения о переполнении (например, использование <>), но я не могу заставить его работать. Мой код пока (только относительные части, если вам нужно больше, я также могу загрузить).

Flask Python:

@app.route('/')
def dateselect_today():
    dateselect = date.today()

    res = User.query.filter(User.date == dateselect).order_by(User.time)

    day_of_week = day_dict[dateselect.weekday()]
    date_select_full = day_of_week + ' ' + str(dateselect)

    return render_template('main_page_v2.html', result=res, date_var = date_select_full)

@app.route('/this_date/', methods=['POST'])
def dateselect_other():

    # dateselect = date.today()
    #
    # if request.method == "POST":
    dateselect = request.form['date_select']

    res = User.query.filter(User.date == dateselect).order_by(User.time)

    if dateselect == 'yesterday':
        dateselect_print = date.today()- timedelta(days=1)
    elif dateselect == 'today':
        dateselect_print = date.today()
    elif dateselect == 'tomorrow':
        dateselect_print = date.today() + timedelta(days=1)
    else:
        dateselect_print = date.today()

    day_of_week = day_dict[dateselect_print.weekday()]
    date_select_full = day_of_week + ' ' + str(dateselect_print)
    print(dateselect)
    print(dateselect)
    return render_template('main_page_v2.html', result=res, date_var = date_select_full, this_date = dateselect)

HTML:

<script type="text/javascript" src="{{ url_for('static', filename='JavaScript.js') }}"></script>
<form action="{{ url_for('dateselect_other') }}" method="post">
    <button class="datebtn" name="date_select" value=yesterday>
    <script type="text/javascript">document.write(yesterday)</script>
    </button>
</form>
<form action="{{ url_for('dateselect_other') }}" method="post">
    <button class="datebtn" name="date_select" value=today>
    <script type="text/javascript">document.write(today)</script>
    </button>
</form>
<form action="{{ url_for('dateselect_other') }}" method="post">
    <button class="datebtn" name="date_select" value=tomorrow>
    <script type="text/javascript">document.write(tomorrow)</script>
    </button>
</form>

JS:

var today = new Date();
var dd1 = String(today.getDate()).padStart(2, '0');
var mm1 = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy1 = today.getFullYear();
today = yyyy1 + '-' + mm1 + '-' + dd1;

var yesterday = new Date(Date.now() - 864e5);
var dd2 = String(yesterday.getDate()).padStart(2, '0');
var mm2 = String(yesterday.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy2 = yesterday.getFullYear();
yesterday = yyyy2 + '-' + mm2 + '-' + dd2;

var tomorrow = new Date(Date.now() + 864e5);
var dd0 = String(tomorrow.getDate()).padStart(2, '0');
var mm0 = String(tomorrow.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy0 = tomorrow.getFullYear();
tomorrow = yyyy0 + '-' + mm0 + '-' + dd0;

Answer 1

С точки зрения дизайна и производительности, я бы предложил, чтобы метод this_date возвращал данные вместо рендера html, используя render_template, на самом деле вы отправляете обратно весь html. Кроме того, учтите, что вы не отправляете никаких запросов данных на ваш сервер, поэтому HTTP POST не имеет смысла, лучше используйте GET. Помимо этого, быстрое решение может быть:

PYTHON:

@app.route('/this_date/')
def this_date():
args = request.args
dateselect = args['dateselect']
res = User.query.filter(User.date == dateselect).order_by(User.time)
if dateselect == 'yesterday':
    dateselect_print = date.today()- timedelta(days=1)
elif dateselect == 'today':
    dateselect_print = date.today()
elif dateselect == 'tomorrow':
    dateselect_print = date.today() + timedelta(days=1)
else:
    dateselect_print = date.today()

day_of_week = day_dict[dateselect_print.weekday()]
date_select_full = day_of_week + ' ' + str(dateselect_print)
print(dateselect)
print(dateselect)
return render_template('main_page_v2.html', result=res, date_var = date_select_full, this_date = dateselect)

HTML:

<html>
<body>
...
<script type="text/javascript" src="{{ url_for('static', filename='JavaScript.js') }}"></script>
<button onclick="filterByDate("today")">TODAY</button>
<button onclick="filterByDate("tomorrow")">TOMORROW</button>
<button onclick="filterByDate("yesterda")">YESTERDAY</button>
...
</html>
</body>

JS:

function filterByDate(dateFactor)
{
  const Http = new XMLHttpRequest();
  const host = window.location.host;
  const url= host.concat("/this_date&dateselect=").concat(dateFactor);
  console.log(url);
  Http.open("GET", url);
  Http.send();
}