Flask应用中提交按钮触发页面刷新，如何阻止该行为？

我完全懂你的痛点——每次提交评论都刷新页面，体验确实不够流畅。要实现无刷新提交，咱们得把传统的「表单提交+后端重定向」改成前端AJAX异步请求+后端返回JSON数据的模式，这样就能在不刷新页面的情况下完成评论提交并更新页面内容了。下面一步步来调整你的代码：

第一步：修改Flask后端代码 #

原来的视图函数在评论提交成功后会重定向到当前页面，这是导致刷新的核心原因。我们需要把它改成返回JSON格式的响应，告诉前端提交结果，同时返回新评论的必要信息（方便前端直接渲染）。

修改后的Python代码：

from flask import jsonify  # 别忘了导入jsonify

@feed_app.route('/message/<message_id>', methods=('GET', 'POST'))
def message(message_id):
    form = FeedPostForm()
    message = None

    user = User.objects.get(username=session.get('username'))
    message = Message.objects.filter(id=message_id).first()
    if not message:
        abort(404)

    if message and message.parent:
        abort(404)

    if request.method == 'POST' and form.validate_on_submit() and session.get('username'):
        # process post
        from_user = User.objects.get(username=session.get('username'))
        post = form.post.data

        # write the message
        comment = Message(
            from_user=from_user,
            text=post,
            message_type=COMMENT,
            parent=message_id
        ).save()

        # 返回JSON数据，而不是重定向
        return jsonify({
            'success': True,
            'comment': {
                'author': from_user.username,
                'content': post,
                # 如果有创建时间的话也加上，比如comment.created_at.strftime('%Y-%m-%d %H:%M')
            }
        })

    return render_template('feed/message.html',
        message=message,
        form=form
    )

这里的关键变化是：

• 当收到POST请求且表单验证通过时，不再返回redirect()，而是用jsonify()返回包含评论信息的JSON响应。
• 这样前端就能拿到新评论的数据，直接在页面上动态添加，不用刷新。

第二步：修改前端HTML+JavaScript代码 #

接下来要阻止表单的默认提交行为，用JavaScript异步发送请求，然后更新页面DOM。我们可以用原生JavaScript来实现，不需要额外引入jQuery：

修改后的HTML代码：

<form method="POST" action="{{ url_for('feed_app.message', message_id=fm.message.id) }}" role="form" enctype="multipart/form-data" id="comment-form">
  {{ form.hidden_tag() }}
  <div class="form-group">
    {{ form.post(class='form-control', rows=1, style="background-color:#ffffff;width:200px;display:inline-block;", id="comment-input") }}
    <input type="hidden" name="to_user" value="{{ user.username }}" />
    <button style="border-radius:5px;" type="submit" class="btn btn-success">Comment</button>
  </div>
</form>

<!-- 假设你的评论列表有一个容器，比如下面这个div -->
<div id="comments-list">
  <!-- 已有评论会在这里渲染 -->
</div>

<script>
// 获取表单元素
const commentForm = document.getElementById('comment-form');
const commentInput = document.getElementById('comment-input');
const commentsList = document.getElementById('comments-list');

// 监听表单提交事件
commentForm.addEventListener('submit', async (e) => {
  // 阻止表单的默认提交行为（这是防止页面刷新的关键）
  e.preventDefault();

  // 收集表单数据
  const formData = new FormData(commentForm);

  try {
    // 发送异步POST请求
    const response = await fetch(commentForm.action, {
      method: 'POST',
      body: formData,
      // 带上Cookie，确保Flask能识别用户会话和CSRF令牌
      credentials: 'same-origin'
    });

    if (response.ok) {
      const data = await response.json();
      if (data.success) {
        // 动态创建新评论的HTML元素
        const newComment = document.createElement('div');
        newComment.innerHTML = `
          <div class="comment-item">
            <strong>${data.comment.author}</strong>:
            <span>${data.comment.content}</span>
          </div>
        `;
        // 把新评论添加到评论列表的最前面或者最后面，根据你的需求调整
        commentsList.appendChild(newComment);
        // 清空输入框
        commentInput.value = '';
      }
    } else {
      alert('提交失败，请重试');
    }
  } catch (error) {
    console.error('请求出错:', error);
    alert('网络错误，请稍后再试');
  }
});
</script>

这里的关键细节：

1. 给表单和输入框加上了id，方便JS获取元素。
2. 用e.preventDefault()阻止了表单的默认提交行为，避免页面刷新。
3. 使用FormData收集表单数据，包括Flask的CSRF令牌（来自form.hidden_tag()），这样后端不会报CSRF错误。
4. 请求带上credentials: 'same-origin'，确保会话Cookie被发送，后端能识别当前用户。
5. 请求成功后，用拿到的JSON数据动态创建评论元素，添加到页面的评论列表中，同时清空输入框。

为什么原来的方式会刷新？ #

传统的表单提交会触发浏览器的页面跳转行为——不管你提交到当前页面还是重定向到当前页面，浏览器都会重新加载整个页面。而AJAX是异步发送HTTP请求，浏览器在后台处理请求，不会刷新整个页面，只会更新你指定的DOM部分。

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