我正在与一位合作伙伴一起使用Flask进行一个项目，该项目需要将一个(变量(JSON对象从HTML文件传递到app.py文件，从而查询我们的数据库。我的合作伙伴使用文本输入字段成功地编码了这个版本，并将检索到的记录打印到控制台。然而，在实现下拉菜单时，我们已经改变了很多事情，我们无法使事情再次正常工作。
目前，我可以ping app.py文件并返回一个伪响应(例如，向控制台打印"hello"(，但我似乎无法访问通过JSON对象传入的实际数据。(我甚至还没有弄乱数据库——只是试图操作对象。(最近，我得到了一个GET(url(500(内部服务器错误(，当我使用POST方法时也是如此。
我读了很多关于类似问题的讨论(这里，这里，这里等等(，并尝试了几种不同的方法。我想我一定是在表单上做错了什么，解决方案似乎应该相当简单，但我没有太多运气弄清楚。
以下是相关的HTML和Javscript:
<!-- establish the Flask form which will send the selected airports to the Python code and database -->
<form name="selected_route" id="selected_route" method="GET">
<p>Departure</p>
<p>
<!-- dropdown menu for departure state -->
<select name="departure_state" id="departure_state" onChange="changeDepAirport(this.value);">
</select>
<!-- dropdown menu for departure airport, generated by choice of state -->
<select name="departure_airport" id="departure_airport">
<option value="" disabled selected>Select an airport</option>
</select>
</p>
<p>Arrival</p>
<p>
<!-- dropdown menu for arrival state -->
<select name="arrival_state" id="arrival_state" onChange="changeArrivAirport(this.value);">
</select>
<!-- dropdown menu for arrival airport, generated by choice of state -->
<select name="arrival_airport" id="arrival_airport">
<option value="" disabled selected>Select an airport</option>
</select>
</p>
<!-- submit button for the departure and arrival parameters, which will visualize the data for that route -->
<p>
<button name="go" id="go" type="submit" onclick="retrieveRouteData()">Go!</button>
</p>
</form>
<script>
// function to retrieve the data for the selected route
function retrieveRouteData() {
departure_airport = document.getElementById("departure_airport").value;
arrival_airport = document.getElementById("arrival_airport").value;
route_object = { "departure_airport" : departure_airport,
"arrival_airport" : arrival_airport};
console.log(route_object);
testAj(function(output){
console.log("1")
console.log(output)
});
function testAj(handleData) {
$(document).ready(function() {
$('form').submit(function (e) {
var url = "{{ url_for('test') }}"; // send the data here
$.ajax({
type: "GET",
url: url,
data: route_object,
success: function (data) {
console.log(data) // display the returned data in the console.
}
});
e.preventDefault(); // block the traditional submission of the form.
});
});
};
};
generateStateLists(); // calls the function to populate the initial dropdowns
</script>
这是Python代码：
from flask import Flask, jsonify, render_template, redirect, url_for, g, Response, request
from flask_cors import CORS
from flask_wtf import FlaskForm
from wtforms import StringField
from pymongo import MongoClient
from bson import json_util
from bson.json_util import dumps
import json
import os
app = Flask(__name__)
app.secret_key = ####
@app.route('/')
def home():
print("come to home")
return render_template('home.html')
# send json file
@app.route('/send')
def send():
return "<a href=%s>file</a>" % url_for('static', filename='StateCityCode.json')
@app.route('/test', methods=['GET'])
def test():
data = request.get_json()
return data
if __name__ == '__main__':
app.run(host='0.0.0.0',debug=True)
提前感谢您的帮助！
在发送之前尝试字符串化json数据，并显式设置调用的json头，如下所示：
$.ajax({
type: "POST",
dataType: "json",
url: url,
data: JSON.stringify(route_object),
contentType: "application/json;charset=utf-8"
success: function (data) {
console.log(data) // display the returned data in the console.
}
});
使用flask，您可以轻松访问HTML表单元素。检查以下代码。
HTML:
<form action="" method="POST">
<label> Username </label>
<input type="text" name="username" value={{request.form.username}}>
<label> Password </label>
<input type=”"password" name="password" value={{request.form.password}}>
<button type=”submit”> Submit </button>
</form>
Python:
def login()
if request.method == 'POST':
username = request.form['username']
password = request.form['password']
# code that uses the data you've got
# in our case, checking if the user exists
# and logs them in, if not redirect to sign up
else:
# an exception
基本上，您可以通过应连接到数据库的request.form访问元素。
编辑：如果您想直接在Python中搜索表单元素，可以使用以下代码：
import cgi
form = cgi.FieldStorage()
searchterm = form.getvalue('username')
searchterm = form.getvalue('password')
我认为问题发生在您的代码中的以下行：
var url = "{{ url_for('test') }}"; // send the data here
为了使用Jinja将数据传递给javascript，您可能需要转义数据。参见此处
试着在javascript代码中打印出url的值，看看url是否是正确的