Flask无报错但无法渲染模板,提交表单后返回首页问题求助
问题:Fetch提交表单至Flask后无法渲染结果页面,street-address字段直接获取为None
我通过JavaScript获取表单元素,使用Fetch方法将数据发送到Flask的/submit路由。过程无报错,数据能正常传入Flask,但Flask处理数据后尝试渲染result.html模板时,页面始终停留在初始首页。此前用AJAX也遇到同样问题,之所以不直接在Flask中获取表单数据,是因为street-address字段的取值始终为None。
HTML表单代码
<form id="userinfo"> <div class="search-container"> <div class="first-child"> <input type="text" autofocus class="search search-bar" name="street-address" placeholder="Type your address, e.g. 145 Main... " autocomplete="address-line1"> </div> <div class="second-child"> <input type="text" class="search child-search" name="apartment" placeholder="Apartment, unit, etc." autocomplete="address-line2"> <input type="text" class="search child-search" name="city" placeholder="City" required autocomplete="address-level2"> <input type="text" class="search child-search" name="state" placeholder="State / Region" autocomplete="address-level1" required> <input type="text" class="search child-search" name="country" placeholder="Country" autocomplete="country-name" required> <input type="text" class="search child-search" name="postal_code" placeholder="Postal Code" autocomplete="postal-code" required> </div> </div> <button type="submit" class="submit">Search</button> </form>
Flask路由代码
@app.route("/submit", methods=["POST"]) def submit(): try: data = request.get_json() # 接收JavaScript发送的数据 print(data) data_list = helpers.check_format(data) print(data_list) if not data_list: print("Not") return jsonify({"Status": "Incorrect Data"}) address_search = reviews.query.filter(reviews.address.startswith(data_list[0])).all() print(address_search) print("POST") # 渲染模板并返回 return render_template("result.html", address_search=address_search, status="OK") except Exception as e: print("Exception Happened:", str(e)) return jsonify({"Status": "Error"})
JavaScript代码
document.getElementById('userinfo').addEventListener('submit', function (event) { event.preventDefault(); const formData = new FormData(this); const jsonData = {}; formData.forEach((value, key) => { jsonData[key] = value; }); // 可在此处使用表单数据 // console.log(jsonData); // 清空表单(可选) this.reset(); sendData(jsonData); }); // 发送地址数据 function sendData(jsonData) { fetch('/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(jsonData), }) }
内容的提问来源于stack exchange,提问作者Gurneesh Budhiraja
相关产品推荐
相关产品推荐

