Flask返回jsonify()跳转到API页面而非更新原页的原因及解决方法

• 核心原因是你的JavaScript代码未正确生效或逻辑错误，导致a标签的默认跳转行为没有被阻止，直接访问了href属性对应的点赞接口，所以展示了原始JSON返回值。具体错误点如下：
  1. AJAX请求地址错误：你在JS中指定的请求地址是/project，和实际的点赞/点踩接口/projects/upvote/<id>完全不匹配，没有调用正确的投票逻辑
  2. 事件绑定范围错误：你给所有<a>标签绑定了点击事件，会影响页面其他普通链接的功能
  3. 阻止跳转逻辑位置风险：你把event.preventDefault()放在了AJAX请求之后，如果AJAX逻辑执行报错，就会跳过这行代码，触发默认跳转
  4. 语法错误：非表单元素（如你的<h1 id="likes">）没有val()方法，获取内容应该用text()
  5. 常见遗漏：没有提前引入jQuery库，导致整段JS代码不执行，直接走默认跳转

1. 修正JavaScript逻辑 #

$(document).ready(function() {
  // 仅绑定投票按钮的点击事件
  $('.votesButton').on('click', function(event) {
    // 第一时间阻止默认跳转，避免逻辑报错时跳转
    event.preventDefault();
    // 从点击的按钮中获取对应接口地址
    const voteApiUrl = $(this).attr('href');

    $.ajax({
      type: 'GET',
      url: voteApiUrl
    })
    .done(function(res) {
      // 更新页面点赞数
      $('#likes').text(res.likes);
    })
    .fail(function() {
      alert('投票操作失败，请稍后重试');
    })
  });
});

2. 确保jQuery正确引入 #

在你引入上述JS代码之前，先引入jQuery库，示例如下：

<script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>

3. 补充点踩接口 #

你当前只实现了点赞接口，需要同步补充点踩的后端路由：

@main.route('/projects/downvote/<int:id>')
def projectdownvote(id):
    post = projectPosts.query.get_or_404(id)
    post.likes -= 1
    db.session.commit()
    return jsonify({"likes":post.likes})

4. 多项目场景适配（单项目可忽略） #

如果你的页面同时展示多个项目，要避免多个点赞元素的ID重复，修改HTML代码给每个项目的点赞数设置唯一ID：

<a href='/projects/upvote/{{project.id}}' class="votesButton">Up vote</a>
<a href='/projects/downvote/{{project.id}}' class="votesButton">Down vote</a>
<h1 style="margin-bottom:5%; display: inline-block;" id="likes-{{project.id}}">&nbsp;{{project.likes}}</h1>

对应修改JS中的更新逻辑：

.done(function(res) {
  // 从接口地址中提取项目ID
  const projectId = voteApiUrl.split('/').pop();
  $('#likes-' + projectId).text(res.likes);
})

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