解决Flask单词计数器表单随按键触发提交的问题

问题根源 #

你当前的代码中，每次textarea触发input事件时都会调用form_input.submit()，这直接导致表单提交、页面刷新，不符合动态更新的需求。下面提供两种可行解决方案：

方案一：纯前端JavaScript计算（推荐，高效简单） #

不需要依赖后端，直接在前端完成单词计数并更新页面，完全避免表单提交。

修改HTML中的<script>部分：

const user_inp = document.getElementById("user_input");
const wordCountSpan = document.getElementById("word_count");

user_inp.addEventListener("input", function() {
  const text = this.value.trim();
  // 按空白字符分割文本，过滤空字符串后统计数量
  const wordCount = text ? text.split(/\s+/).length : 0;
  wordCountSpan.textContent = wordCount;
});

额外优化 #

可以移除表单的action和method属性（因为不需要提交表单了），或者保留表单标签但不使用它的提交功能：

<form id="input_form">
  <label for="user_input">Type or paste your text below 👇</label>
  <textarea name="user_input" id="user_input"></textarea>
</form>

方案二：AJAX异步请求后端计算（适合复杂逻辑） #

如果必须用Flask后端处理计数逻辑（比如需要特殊规则的单词统计、数据持久化等），可以用AJAX发送异步请求，避免页面刷新。

步骤1：修改Flask后端代码 #

添加一个专门处理单词计数的API路由：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

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

@app.route("/count-words", methods=["POST"])
def count_words():
    user_input = request.json.get("user_input", "")
    # 后端实现单词计数逻辑（可根据需求调整）
    cleaned_text = user_input.strip()
    word_count = len(cleaned_text.split()) if cleaned_text else 0
    return jsonify({"word_count": word_count})

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

步骤2：修改HTML中的JavaScript代码 #

用fetch发送异步请求，更新计数：

const user_inp = document.getElementById("user_input");
const wordCountSpan = document.getElementById("word_count");

user_inp.addEventListener("input", function() {
  const text = this.value;
  fetch("/count-words", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ user_input: text }),
  })
  .then(response => response.json())
  .then(data => {
    wordCountSpan.textContent = data.word_count;
  })
  .catch(error => console.error("计数请求失败:", error));
});

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