时间戳

首页 > 解决方案 > 使用 HTML 中的动态 URL 和按钮发布请求 Flask

python - 使用 HTML 中的动态 URL 和按钮发布请求 Flask

问题描述

我有一个为用户提供足球预测的网络应用程序。一个 postgres 数据库存储预测，网站根据选定的日期为它们提供服务。第一次加载页面时，根据今天的日期查询数据库。如果用户随后按下网站中的三个按钮之一（昨天、今天和明天显示为 2020-1-11、2020-1-12、2020-1-13），则查询应相应更改。我也希望更改 url，例如 /this_date/2020-1-12 以便我可以缓存每个查询。我已经想出了如何创建按钮并发送发布请求，但它们都返回到' http://127.0.0.1:5000/this_date/'。任何想法如何实现动态 URL？我花了无数个小时来寻找这个并且看到了其他溢出的帖子（比如使用 <>），但我似乎无法让它工作。到目前为止我的代码（只有相关部分，如果您需要更多我也可以上传）。

烧瓶 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;

标签： pythonflaskrequest

解决方案

从设计和性能的角度来看，我建议 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();
}

推荐阅读