解决Flask中Fetch请求后模板渲染失效与页面导航问题

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

app = Flask(__name__)

# 模拟一个结果页面路由
@app.route("/result_page")
def result_page():
    return render_template("result.html", message="数据处理成功！")

@app.route("/submit", methods=["POST"])
def submit():
    try:
        data = request.get_json()  # 假设前端发送的是JSON
        print("Received data from JS:", data)

        # 模拟数据处理
        # data_list = helpers.check_format(data)
        # if not data_list:
        #     return jsonify({"Status": "Incorrect Data"})

        # address_search = reviews.query.filter(reviews.address.startswith(data_list[0])).all()
        # print("Processed address search:", address_search)

        # 假设数据处理成功，返回重定向URL
        return jsonify({
            "status": "OK",
            "message": "数据处理成功，即将跳转！",
            "redirect_url": url_for('result_page') # 生成目标页面的URL
        })

    except Exception as e:
        print("Exception Happened:", str(e))
        return jsonify({"status": "Error", "message": str(e)})

# 假设的首页
@app.route("/")
def home():
    return render_template("home.html") # 你的首页模板

document.getElementById('userinfo').addEventListener('submit', function (event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const formData = new FormData(this);
  const jsonData = {};

  formData.forEach((value, key) => {
      jsonData[key] = value;
  });

  sendData(jsonData);
});

function sendData(jsonData) { 
  fetch('/submit', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify(jsonData),
  })
  .then(response => {
      if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json(); // 解析JSON响应
  })
  .then(data => {
      console.log('Server response:', data);
      if (data.status === "OK" && data.redirect_url) {
          // 如果服务器返回了重定向URL，则执行页面跳转
          window.location.href = data.redirect_url;
      } else if (data.status === "Incorrect Data" || data.status === "Error") {
          alert("操作失败: " + data.message);
      }
  })
  .catch(error => {
      console.error('Fetch error:', error);
      alert('请求发送失败或服务器错误！');
  });
} 

<form id="userinfo" action="/submit" method="POST">
    <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>

from flask import render_template, request, redirect, url_for, Flask

app = Flask(__name__)

@app.route("/submit", methods=["POST"])
def submit_traditional():
    try:
        # 使用 request.form 获取表单数据
        street_address = request.form.get("street-address")
        apartment = request.form.get("apartment")
        city = request.form.get("city")
        state = request.form.get("state")
        country = request.form.get("country")
        postal_code = request.form.get("postal_code")

        print("Received form data:", {
            "street-address": street_address,
            "apartment": apartment,
            "city": city,
            "state": state,
            "country": country,
            "postal_code": postal_code
        })

        # 模拟数据处理和查询
        # address_search = reviews.query.filter(reviews.address.startswith(street_address)).all()

        # 直接渲染模板或重定向
        # return render_template("result.html", address_search=address_search, status="OK")
        return redirect(url_for('result_page')) # 示例：重定向到结果页面

    except Exception as e:
        print("Exception Happened:", str(e))
        # 传统表单提交下，错误处理可能需要渲染一个错误页面或重定向回带错误信息的页面
        return render_template("error.html", message=str(e))

@app.route("/result_page")
def result_page():
    return render_template("result.html", message="数据处理成功！")

@app.route("/")
def home():
    return render_template("home.html")

<input type="text" name="street_address" placeholder="Type your address...">