如何点击HTML按钮执行Python代码且不改变URL？

嗨，我来帮你解决这个问题～你当前用表单提交按钮实现功能的代码是这样的：

HTML部分：

<form action="/submit" method="post"> 
  <input type="submit" class="btn" value="Generate Word" > 
</form>

对应的Flask后端代码：

@app.route('/submit', methods = ['POST']) 
def submit():
    # 这里是生成Word的业务逻辑
    # 示例返回内容，可根据实际需求调整
    return "Word生成成功！"

你提到点击按钮后URL会变成/submit，这是因为表单默认的提交行为会刷新页面并跳转到action指定的地址。想要避免这个问题，我们可以用异步AJAX请求来实现，它能在后台发送请求，页面不刷新、URL也不会改变。下面给你两种常用的实现方式：

方式一：原生JavaScript发送AJAX请求 #

这种方式不需要引入额外库，直接用浏览器原生API即可：

修改后的HTML代码：

<form id="generateWordForm"> 
  <input type="submit" class="btn" value="Generate Word" > 
</form>

<script>
// 获取表单元素，监听提交事件
document.getElementById('generateWordForm').addEventListener('submit', function(e) {
    // 阻止表单默认的跳转提交行为
    e.preventDefault();
    
    // 发送POST请求到后端接口
    fetch('/submit', {
        method: 'POST',
        // 如果表单有输入字段，可用FormData序列化数据
        // body: new FormData(this),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
    .then(response => response.text()) // 如果后端返回JSON，就用response.json()
    .then(result => {
        // 请求成功后的处理，比如提示用户
        alert(result);
        // 也可以更新页面内容，比如显示生成成功的提示
    })
    .catch(error => {
        // 处理请求失败的情况
        console.error('请求出错啦:', error);
    });
});
</script>

方式二：使用jQuery发送AJAX请求 #

如果你的项目已经引入了jQuery，这种写法会更简洁：

修改后的HTML代码：

<!-- 先确保引入了jQuery，如果没引入就加这行 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<form id="generateWordForm"> 
  <input type="submit" class="btn" value="Generate Word" > 
</form>

<script>
$('#generateWordForm').submit(function(e) {
    // 阻止默认跳转
    e.preventDefault();
    
    // 发送POST请求
    $.post('/submit', /* 如果有表单数据就写$(this).serialize() */, function(result) {
        // 请求成功后的回调
        alert(result);
    })
    .fail(function(err) {
        // 请求失败的处理
        console.error('请求失败:', err);
    });
});
</script>

注意事项 #

• 两种方式的后端代码都不需要改动，保持原有的/submit路由即可，AJAX只是换了一种请求方式，后端依然能正常处理。
• 如果你的表单包含输入框、选择器等需要提交的字段，只需要把表单数据序列化后放到请求的body里（原生JS用FormData，jQuery用serialize()），后端就能通过request.form获取到数据。
• 如果后端需要返回结构化数据（比如状态码、提示信息），可以用return jsonify({"status": "success", "msg": "生成完成"})，前端对应改为解析JSON数据。

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