Flask与AJAX对接实现无刷新获取预测结果问题排查

核心问题分析 #

1. 表单默认提交行为未阻止：Get prediction按钮为type="submit"，点击后会触发表单默认提交流程，导致页面刷新，AJAX请求被中断覆盖。
2. Flask路由冲突：两个路由均绑定根路径/，POST请求的处理逻辑会被覆盖，无法正确响应AJAX请求。
3. 后端未保存上传文件：获取到上传文件后未执行保存操作，generate_prediction无法读取目标图片文件。
4. AJAX请求URL错误：前端请求仍指向根路径/，未匹配专门的预测接口。

修复步骤及代码修改 #

1. 前端代码修改

• 添加e.preventDefault()阻止表单默认提交行为
• 将AJAX请求URL调整为专门的预测接口路径
• 补充实现图片预览的readURL函数（原代码缺失该逻辑）

修改后的前端代码：

<form id="upload-file" method="POST" enctype="multipart/form-data">
  <input onchange="readURL(this)" type="file" id="upload" name='file' style="display: none;" autocomplete="off" required>
  <img id="blah" />
  <button id="submit_btn" onclick="$('#upload').click();">Upload image</button>
  <button id="result" type="submit">Get prediction</button>
  <p id="msg" style=" margin-left: 200px;"> </p>
</form>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
  $("#result").on("click", function(e) {
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    
    var form_data = new FormData($('#upload-file')[0]);

    $.ajax({
      type: 'POST',
      url: '/predict', // 指向专门的预测接口
      data: form_data,
      timeout: 600000,
      contentType: false,
      processData: false,
      cache: false,

      success: function(data) {
        console.log("SUCCESS !!: ", data);
        $('#msg').text(' Prediction is:  ' + data);
      },

      error: function(e) {
        console.log('Failuuuuure!!')
        console.log("ERROR : ", e.responseText);
        alert("ERROR : " + e.responseText);
      }
    });
  });

  // 实现图片预览功能
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) {
        $('#blah').attr('src', e.target.result);
      };
      reader.readAsDataURL(input.files[0]);
    }
  }
</script>

2. Flask后端代码修改

• 拆分路由：将预测逻辑绑定到/predict路径，避免和首页路由冲突
• 添加文件保存操作：确保上传图片被保存到指定路径，供预测函数读取
• 可选：自动创建上传目录，避免文件保存失败

修改后的后端代码：

from flask import Flask, render_template, request
import os

app = Flask(__name__)
# 自动创建上传目录
os.makedirs('static/uploads', exist_ok=True)

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

@app.route('/predict', methods=["POST"])
def predict():
    if request.method == 'POST':
        file = request.files['file']
        img_path = f"static/uploads/{file.filename}"
        # 保存上传的图片文件
        file.save(img_path)
        prediction = generate_prediction(img_path)
        return str(prediction)

# 替换为你的实际预测逻辑
def generate_prediction(img_path):
    # 示例返回值，根据你的模型逻辑修改
    return "猫科动物"

if __name__ == '__main__':
    app.run(debug=True)

内容的提问来源于stack exchange，提问作者Melai11