如何将jQuery表单数据提交至Flask后端进行处理？

你的代码框架已经搭建完成，但存在几个关键问题导致表单数据无法正确提交到后端处理，以下是具体修正方案和扩展说明：

1. 修复表单元素的name属性缺失问题 #

你的<select id="citySelect">未设置name属性，而$('#cityForm').serialize()仅会序列化带name的表单元素，后端request.form['citySelect']会因找不到对应数据报错。修改模板中的select标签：

<select id="citySelect" name="citySelect"></select>

2. 完善后端错误处理与响应格式 #

当前后端process_form视图未做数据存在性判断，且返回纯文本不适合AJAX请求，调整为：

@app.route('/process_form', methods=['POST'])
def process_form():
    city = request.form.get('citySelect')
    if not city:
        return jsonify({'status': 'error', 'message': '未选择城市'}), 400
    # 这里添加数据保存逻辑，示例为写入本地文件
    with open('selected_cities.txt', 'a', encoding='utf-8') as f:
        f.write(f"{city}\n")
    return jsonify({'status': 'success', 'message': f'感谢提交城市：{city}'})

3. 优化前端AJAX的用户反馈 #

当前前端仅在控制台打印响应，可改为页面直观提示，先在表单下方添加提示区域：

<form id="cityForm">
  <!-- 原有表单内容 -->
  <div id="submitMessage" style="margin-top:10px;"></div>
</form>

再修改AJAX的回调逻辑：

success: function(response) {
  $('#submitMessage').text(response.message).css('color', 'green');
  // 可选：提交后清空表单
  $('#cityInput').val('');
  $('#citySelect').html('');
},
error: function(xhr) {
  var res = xhr.responseJSON;
  $('#submitMessage').text(res.message).css('color', 'red');
}

完整修正后的代码 #

模板文件（index.html） #

<!DOCTYPE html>
<html>
  <head>
    <title>Suggest Cities</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
      function getSuggestions() {
        var searchTerm = $('#cityInput').val();
        $.ajax({
          url: '/suggest_cities',
          type: 'POST',
          data: {searchTerm: searchTerm},
          success: function(response) {
            var suggestions = response.suggestions;
            var options = suggestions.map(function(city, i) {
              return '<option value="' + city + '">' + city + '</option>';
            }).join('');
            $('#citySelect').html(options);
          },
          error: function(xhr) {
            console.log(xhr.responseText);
          }
        });
      }

      $(document).ready(function() {
        getSuggestions();

        $('#cityInput').on('input', getSuggestions);

        $('#cityForm').submit(function(e) {
          e.preventDefault();
          var selected = $('#citySelect').val();
          $('#submitMessage').text('');

          if (!selected) {
            $('#submitMessage').text('没有匹配的城市').css('color', 'red');
            return;
          }

          $.ajax({
            url: '/process_form',
            type: 'POST',
            data: $('#cityForm').serialize(),
            success: function(response) {
              $('#submitMessage').text(response.message).css('color', 'green');
              $('#cityInput').val('');
              $('#citySelect').html('');
            },
            error: function(xhr) {
              var res = xhr.responseJSON;
              $('#submitMessage').text(res.message).css('color', 'red');
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <form id="cityForm">
      <label for="cityInput">Enter a city:</label>
      <input type="text" id="cityInput" name="cityInput" autocomplete="off">
      <select id="citySelect" name="citySelect"></select>
      <input type="submit" value="Submit">
      <div id="submitMessage" style="margin-top:10px;"></div>
    </form>
  </body>
</html>

Flask后端代码 #

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 示例城市列表
cities = [
    'New York',
    'Los Angeles',
    'Chicago',
    'Houston',
    'Phoenix',
    'Philadelphia',
    'San Antonio',
    'San Diego',
    'Dallas',
    'San Jose'
]

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

@app.route('/suggest_cities', methods=['POST'])
def suggest_cities():
    search_term = request.form.get('searchTerm', '')
    suggestions = [city for city in cities if search_term.lower() in city.lower()]
    return jsonify({'suggestions': suggestions})
    
@app.route('/process_form', methods=['POST'])
def process_form():
    city = request.form.get('citySelect')
    if not city:
        return jsonify({'status': 'error', 'message': '未选择城市'}), 400
    # 数据保存示例：写入本地文件
    with open('selected_cities.txt', 'a', encoding='utf-8') as f:
        f.write(f"{city}\n")
    # 若使用数据库（如SQLAlchemy），可替换为：
    # new_city = City(name=city)
    # db.session.add(new_city)
    # db.session.commit()
    return jsonify({'status': 'success', 'message': f'感谢提交城市：{city}'})

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

核心知识点总结 #

• 表单元素必须设置name属性，serialize()和后端request.form均通过name识别数据
• 后端处理AJAX请求时，返回JSON格式响应更便于前端解析
• 数据保存可根据需求选择文件、数据库等方式，示例中以文件写入做基础演示

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