Javascript 来自Flask表单（requests.get）的多个输入，Python中只显示第一个输入_Javascript_Python_Html_Flask

Javascript 来自Flask表单（requests.get）的多个输入，Python中只显示第一个输入

javascript python html flask

Javascript 来自Flask表单（requests.get）的多个输入，Python中只显示第一个输入,javascript,python,html,flask,Javascript,Python,Html,Flask,我希望创建一个非常简单的web表单，它接受3个用户输入（一个单词和两个日期），并返回一个结果。我让脚本工作，但只有一个用户输入正确显示。其他两个（日期）始终设置为默认值-无论导入什么。我当前使用的是request.forms.get（），但键没有显示。附件是我的密码 from flask import Flask, Response, render_template, request, jsonify app = Flask(__name__) num = 'Test' start = '0

我希望创建一个非常简单的web表单，它接受3个用户输入（一个单词和两个日期），并返回一个结果。我让脚本工作，但只有一个用户输入正确显示。其他两个（日期）始终设置为默认值-无论导入什么。我当前使用的是request.forms.get（），但键没有显示。附件是我的密码

from flask import Flask, Response, render_template, request, jsonify


app = Flask(__name__)
num = 'Test'
start = '01-01-2020'
end = '09-01-2020'


@app.route('/') 
def index(): 
    return render_template('index.html') 

@app.route('/square/', methods=['POST']) 
def square(): 
    global num
    global start
    global end
    num = str(request.form.get('number', 'Term'))
    #start = datetime.date(request.form.get('start_date', datetime.now()))
    start = str(request.values.get('start', '2020-01-01'))
    end = str(request.values.get('end', '2020-09-01'))    
    print("------")
    print(num)
    print(start)
    print(end)
    data = {'square': num, 'start':start, 'end':end} 
    data = jsonify(data)
    return data

搜索词会随用户输入而正确更改，但不会随日期而更改。在下面的代码中，当用户输入后按下submit values（提交值）按钮时，应加载两个日期和术语。日期和术语正确加载到前端的输出部分，但日期不会显示在后端。html代码附在下面：

PE html> 
<html lang='en'> 
    <head> 
        <title>Flask App</title> 
        <style type="text/css"> 
            * { 
                font-family: sans-serif; 
            } 
        </style> 
    </head> 
    <body> 
        <h1>Program</h1> 
        <form method="post" form name="my_form" id="form"> 
            <label for="num">Enter Search Term : </label> 
            <input type="text" id="num" name="number" autofocus autocomplete="off" placeholder="Term">
            <!--- </br>  --->
            <label for="start_date">Enter Start Date: </label> 
            <input type="date" id="start_date" name="start" placeholder="01/01/2020">
            <!--- </br>  --->
            <label for="end_date">Enter End Date: </label> 
            <input type="date" id="end_date" name="end" placeholder="09/01/2020">  
            <button>Submit Values</button> 
        </form>
        <p id="square"></p> 
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
        <script> 
            $('#form').on('submit', function(e){ 
                var number = $('#num').val(); 
                var start_date = $('#start_date').val();
                var end_date = $('#end_date').val();
                e.preventDefault();
                function check() {
                        if(number == "")
                            number = "Test";
                        if(start_date == "")
                            start_date = "01-01-2020";
                    if(end_date == "")
                        end_date = "09-01-2020";
                    }
                check(); 
                $.ajax({ 
                    url: 'http://127.0.0.1:5000/square/', 
                    data: {'number': number},  <!--- this is the error --->
                    method: 'POST',
                    success: function(data) { 
                        $('#num').val(''); 
                        $('#square').html('Date Range of ' + start_date + ' to ' + end_date + ' with Term: "' + number + '" loaded! Click the button below.') 
                    },

                }); 
            }); 
        </script> 

    </body> 
</html>

PE-html>
烧瓶应用程序
* { 
字体系列：无衬线；
} 
节目
输入搜索词：
输入开始日期：
输入结束日期：
提交值

$（'#form'）。关于（'submit'，函数（e）{
var number=$（'#num'）.val（）；
var start_date=$（“#start_date”）.val（）；
var end_date=$（'#end_date'）.val（）；
e、 预防默认值（）；
函数检查（）{
如果（数字==“”）
number=“测试”；
如果（开始日期==“”）
开始日期=“01-01-2020”；
如果（结束日期==“”）
结束日期=“09-01-2020”；
}
检查（）；
$.ajax（{
网址：'http://127.0.0.1:5000/square/', 
数据：{'number'：number}，
方法：“POST”，
成功：函数（数据）{
$（'#num'）.val（''）；
$（“#square”）.html（“+start#u Date+”到“+end#u Date+”的日期范围，其中包含加载的“+number+”！单击下面的按钮。“）
},
}); 
});

您应该删除HTML for方法，因为您已经在AJAX中声明了该方法。这就给你留下了这样的东西：

<form name="my_form" id="form">

data: $('#my_form').serialize()

AJAX数据应如下所示：

<form name="my_form" id="form">

data: $('#my_form').serialize()

最后，在flask中，您应该以以下方式请求表单数据：

start_date = request.form['start_date']
end_date = request.form['end_date']

Montior确保监控浏览器控制台的JS端应用程序错误，您可以将

console.log（'Submission Successful'）

添加到您的success功能中，并将

console.log（'something more'）

添加到错误功能中。

在我进入表单之前，

global

s表明，这一点已被彻底打破。不要在webapp中使用它们

不是有效的HTML（我非常确定）。里面有一个浮动的

表单

tag@roganjosh从技术上讲，即使没有值，html标记中也可以有任何属性。但是

form

标记没有名为

form

的属性，而且因为

form

也是一个标记名，它可能会对表单元素的起始位置产生一些不希望的影响