Javascript 当用户喜欢帖子时，如何动态更新Flask模板？

我有一个简单的基于博客的网页，在那里你可以喜欢文章，但是当喜欢的动作发生时，它会刷新整个页面，当你已经在页面底部时，这真的很糟糕。所以基本上我只想刷新html的一部分

我读了很多关于ajax的书，但是当a试图实现它时，它并没有很好地工作：（

@posts.route（'/like//
{%else%}
{%endif%}
{%else%}
{%endif%}
{{post.likes.count（）}

$（文档）.ready（函数（）{
$（文档）.on（'click'，'updateButton'，function（））{
var post_id=$（this.attr（'post_id'）；
req=$.ajax({
url:'/like/'
类型：'POST'
数据：{id:post_id}
});
请求完成（功能（数据）{
$（'result'+post_id）.html（数据）；
});
});

在ajax

.done（）

函数中，您应该更改以下内容：

$('result'+post_id).html(data)

对这个

$('#result'+post_id).html(data)

---

因为在jQuery中，您必须将

#

添加到您对

id

的第一个查询中，这只是我的概念。它会让您了解如何处理它

您可以看到我如何将like和inspect附加到id属性，以便将其作为ajax发布

 <a class="unlike" id="unlike_{{post.id}}" href="{{ url_for('posts.like_action', post_id=post.id, action='unlike') }}"><img src="{{url_for('static', filename='heart-filled.png')}}" style="width:5%; height:5%;"></a>


      <a class="like" id="like_{{post.id}}" href="{{ url_for('posts.like_action', post_id=post.id, action='like') }}"><img src="{{url_for('static', filename='heart-no-fill.png')}}" style="width:5%; height:5%;"></a>

下面是ajax脚本的外观

$(document).ready(function(){

    // like and unlike click
    $(".like, .unlike").click(function(){
        var id = this.id;   // Getting Button id
        var split_id = id.split("_");

        var text = split_id[0];
        var post_id1 = split_id[1];  // postid



        // AJAX Request
        $.ajax({
            url: '/ur-url',
            type: 'post',
            data: {post_id1:post_id1,likeunlike:text},
            dataType: 'html',
            success: function(data){
                //var likes = data['likes'];
                //var unlikes = data['unlikes'];

                $("#likes_"+post_id).html(data);        // setting likes
                $("#unlikes_"+post_id).html(data);    // setting unlikes


            }

        });

    });

});

这只是一个概念。

---

时间不在myside上，否则我会深入研究…谢谢

Thx！但它仍然不起作用，like_action（）将整个代码段作为完整的html返回，而不是主html的一部分：（@MarkKiraly您需要返回

json

对象，而不是

def like_action（…）中的整个html）

Thx很多！我会在计算机前尽可能快地尝试它，一个问题，我应该在like_action funct中返回什么。呈现的模板或jsonify？您可以同时尝试这两种方法，但是jsonify是可以的。如果您使用jsonify或json.dumps（{'inspect'：inference value，'like'：like value here}）然后在你的ajax中。数据类型应该是json而不是html，例如数据类型：“json”，谢谢你3天后终于得到它！干杯！我很高兴能在这方面帮助你。通过reactjs+redux、vuejs或angular6+更容易做到。我通常只需发布数据并通过json检索响应，然后允许上面列出的任何前端处理我想你也应该尝试使用前端javascript。它让事情变得更快更简单

if likeunlike == 'like':
        current_user.like_post(post)
        db.session.commit()
    if likeunlike == 'unlike':
        current_user.unlike_post(post)

$(document).ready(function(){

    // like and unlike click
    $(".like, .unlike").click(function(){
        var id = this.id;   // Getting Button id
        var split_id = id.split("_");

        var text = split_id[0];
        var post_id1 = split_id[1];  // postid



        // AJAX Request
        $.ajax({
            url: '/ur-url',
            type: 'post',
            data: {post_id1:post_id1,likeunlike:text},
            dataType: 'html',
            success: function(data){
                //var likes = data['likes'];
                //var unlikes = data['unlikes'];

                $("#likes_"+post_id).html(data);        // setting likes
                $("#unlikes_"+post_id).html(data);    // setting unlikes


            }

        });

    });

});