未使用redirect函数却自动跳转到错误页面，如何阻止该跳转？

我来帮你分析下问题出在哪，以及怎么搞定它：

问题根源 #

1. HTML表单的method属性放错位置了：你把method="POST"写在了<input>标签里，但这个属性本来应该属于<form>标签。虽然这不会直接导致跳转，但会让表单默认用GET方法提交，和你Flask路由的配置虽然兼容，但这不是核心问题。
2. 浏览器的默认表单提交行为：不管后端返回什么内容，点击submit按钮后，浏览器都会默认跳转到表单action指定的URL。哪怕你的路由返回空字符串，浏览器也会加载这个空内容的页面，看起来就像是跳转到了错误页面。

解决方案 #

要阻止跳转，我们得取消表单的默认提交行为，改用AJAX在后台发送请求，这样页面就不会刷新或跳转了。

步骤1：修正HTML代码 #

把method属性移到<form>标签上，再给表单加个ID方便后续操作：

<form id="record-form" action="http://localhost:5000/record" method="POST">
  <input id="record" onclick="voice_message()" type="submit" value='馃攰 Record'>
</form>

步骤2：用JS阻止默认行为并发送AJAX请求 #

修改你的voice_message()函数，阻止浏览器的默认跳转，同时用AJAX发送请求：

function voice_message() {
  // 阻止表单默认提交行为
  event.preventDefault();
  
  // 用AJAX发送POST请求
  const form = document.getElementById('record-form');
  fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  })
  .then(response => {
    // 请求成功后的提示，可根据需求修改
    console.log('录音请求已发送');
  })
  .catch(error => {
    console.error('请求出错了:', error);
  });
}

如果不想改动voice_message()，也可以直接给表单绑定onsubmit事件来阻止跳转：

<form id="record-form" action="http://localhost:5000/record" method="POST" onsubmit="return false;">
  <input id="record" onclick="voice_message()" type="submit" value='馃攰 Record'>
</form>

然后在voice_message()里单独写AJAX请求逻辑就行。

步骤3：优化Flask路由（可选） #

你现在返回空字符串没问题，但可以改成返回JSON响应，方便前端后续处理：

from flask import jsonify

@app.route("/record",methods = ['POST','GET'])
def get_voice():    
    print("record's button was clicked")    
    TFIDF = tfidf.TFIDF_CLASS()    
    TFIDF.choosen_Type(1,"")    
    return jsonify({"status": "success", "message": "操作完成"})

这样处理后，点击提交按钮就不会跳转页面了，请求会在后台悄悄完成，页面保持原样。

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