简单的 Flask jQuery AJAX答案

【问题标题】：Simple Flask jQuery AJAX简单的 Flask jQuery AJAX
【发布时间】：2021-02-05 08:55:25
【问题描述】：

我正在尝试了解使用 jQuery AJAX 和 Flask 的逻辑，但是我做错了。我一直在关注here 和here 教程，但没有解决方案。要获得逻辑 - 我只想在两个单独的字段中输入日期，并将这些日期返回到普通 <p> 标记中的同一页面。我怀疑服务器接收日期有问题。提交相对形式不会返回任何东西给#result

HTML 表单

<form>
    <input name="StartDate" id="StartDate" type="date" class="form-control"></div>
    <input name="EndDate" id="EndDate" type="date" class="form-control"></div>
    <a href="#" id="generate"><button class='btn btn-info'>Generate</button></a>
</form>
<p id=result></p>

jQuery - 位于 <body> 标记的底部，在导入 jQuery 本身之后。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('a#generate').bind('click', function () {
            $.getJSON($SCRIPT_ROOT + '/generate_report', {
                StartDate: $('input[name="StartDate"]').val(),
                EndDate: $('input[name="EndDate"]').val()
            }, function (data) {
               $("#result").text(data.result);
            });
            return false;
        });
    });
</script>

Flask Server - 我已经导入了相关依赖

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

    start_date = request.args.get('StartDate', 0, type=str)
    end_date = request.args.get('EndDate', 0, type=str)
    
    return jsonify(result=start_date + "-" + end_date)

【问题讨论】：

请分享浏览器调试器的截图。从网络选项卡和控制台，选项卡查看是否有任何错误。此外，我们可以一起查看您的请求和响应，然后我们可以一起解决。

标签： html jquery ajax flask

【解决方案1】：

请使用按钮发送表单，表单内的锚点没有意义。

我建议您使用"submit" 事件的形式，虽然按钮的“点击”事件也可以工作。 preventDefault 函数绕过了表单的标准行为，因此您可以使用getJSON 自己发送表单。为了序列化表单数据，我使用serialize 将所有表单数据转换为符合要求的字符串的函数。因此，数据以“application/x-www-form-urlencoded”的形式发送。

在这个例子中我没有使用变量$SCRIPT_ROOT，因为它是 localhost下基本为空，不是绝对必要的。

<form name="my-form">
  <div class="form-group">
    <label for="start-date">Start</label>
    <input type="date" name="start-date" id="start-date" class="form-control">
  </div>
  <div class="form-group">
    <label for="end-date">End</label>
    <input type="date" name="end-date" id="end-date" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Generate</button>
</form>
<p id=result></p>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
      $("form[name='my-form']").submit(function(event) {
        event.preventDefault();
        const formData = $(this).serialize();
        $.getJSON("/generate_report", formData, function(data) {
          $("#result").text(data.result);
        });
      });
    });
</script>

request.args.get 的结果默认为str 类型。如果表单域为空，get 总是返回None。由于缺少值而可能出现的KeyError 被绕过。

@app.route('/generate_report')
def generate_report():
    start_date = request.args.get('start-date')
    end_date = request.args.get('end-date')
    return jsonify(result=f'{start_date} - {end_date}')

【讨论】：

感谢您的回复。我将在新的一周尝试这个并恢复！
这是一个精确的完美答案，谢谢 - 我会标记它。我现在才看到$SCRIPT_ROOT 的不必要性，应该更加关注。
嗨，我想知道您是否知道使用相同逻辑进行文件上传的任何来源/答案？我在这里问了一个问题stackoverflow.com/questions/66151680/… 但没有运气