【发布时间】：2021-01-28 10:59:42
【问题描述】：
我目前正在开发一个小型烧瓶应用程序，并尝试制作一个无需刷新页面即可工作的点赞按钮。
使用 jQuery 似乎是一种方法，所以我尝试编写一些代码，但它不起作用。（即使来自 preventDefault() 函数）
这是我的 html 结构：
<div class="like_buttons{{ subject.id }}">
{% if current_user.id and current_user.has_liked_subject(subject) %}
<a href="#" class="like_button" id="unlike_{{ subject.id }}">
<img src="{{ url_for('static', filename='img/liked.png') }}">
</a>
{% else %}
<a href="#" class="like_button" id="like_{{ subject.id }}">
<img src="{{ url_for('static', filename='img/unliked.png') }}">
</a>
{% endif %}
</div>
这是我的 js 代码，用于抓取用户点击喜欢/不喜欢按钮并将数据发送到“喜欢”路线，同时防止页面被刷新：
$(document).ready(function() {
$(".like_button").on('click', function(event) {
event.preventDefault();
var request_id = $(this).attr('id').split('_');
var subject_id = request_id[1];
var action = request_id[0];
$.ajax({
url : '/like',
type : 'POST',
data : { subject_id : subject_id, action : action }
});
});
});
这是将like/unlike放入数据库并将数据返回到当前页面的路由（尚未编写返回数据的代码，如果您知道该怎么做，请告诉我）
@app.route('/like', methods=['POST'])
def like():
subject_id = request.form['subject_id']
action = request.form['action']
subject = Subject.query.filter_by(id=subject_id).first_or_404()
if action == 'like':
current_user.like_subject(subject)
db.session.commit()
if action == 'unlike':
current_user.unlike_subject(subject)
db.session.commit()
return jsonify({'result' : 'success'})
# return render_template('like_button.html')
似乎 jQuery 和 js 文件已正确链接到页面，但是当我按下 like 按钮时，页面被刷新并且没有任何反应..
请让我知道出了什么问题以及我应该怎么做。 提前致谢！
【问题讨论】：
-
嘿megamind144，首先我要感谢您作为新用户提出的这个问题（欢迎！）。我认为最后一条信息可以添加到您的问题中：在浏览器中打开 devtools (F12)，转到
network选项卡并检查单击按钮时发出的请求。这甚至可能导致您自己回答问题（在这种情况下，请不要犹豫，通过在此处发布解决方案来回答您自己的问题）。 -
嗨阿克塞尔，感谢您的评论和热烈的欢迎！我尝试了你所说的，这就是我得到的：38 个请求，但其中大多数是字体/图像，它们没问题。我看到 2 个 js 请求，它们是我的 js 文件和 jquery（这就是我说它们似乎被正确链接的原因），仅此而已。我在 XHR 中没有看到和请求（我认为 Ajax 数据应该在其中？）
-
表示该请求从未被触发。尝试调试您的代码以查看导致此问题的原因。您可以通过在 devtools 中逐行运行代码来执行此操作，或者使用
console.log()在关键点上打印一些值。 -
我也调试过它（see this JSBin），它对我有用（也发送请求）。你include jQuery 进入你的页面了吗？单击按钮时控制台是否会抛出任何错误？
-
@AxelKöhler 所以我应该在我自己的 js 文件之前导入 jquery ......！它现在完美运行非常感谢你，你真的拯救了我的一天:) 虽然我的问题是由于这么小的细节，但你教给我的东西，比如如何使用 devtool 非常重要，肯定会让我的生活变得更美好容易多了！度过美好的一天，保持黄金！
标签： javascript jquery json ajax flask