You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 14:23:12