时间戳

首页 > 解决方案 > Django REST framework Ajax 调用仅适用于第一次调用

jquery - Django REST framework Ajax 调用仅适用于第一次调用

问题描述

我正在关注的教程有这段代码，它在页面第一次加载时有效，然后它就无效了。我已阅读有关“仅第一次使用 ajax 调用有效”的所有其他问题，但找不到相关原因。鉴于代码在页面加载时有效，我认为 jQuery 部分存在绑定问题，该问题会阻止按钮在第一次调用时更改，但我无法确定那是什么。我还尝试访问 url 端点（REST 框架端点），每次刷新页面时，计数都会正确更新。所以，问题一定出在前端的某个地方，因为它可以清楚地找到 URL 并更新一次计数，但无法在后续点击时调用 ajax。

<li>
    <a class="like-btn" data-href="{{ obj.get_api_like_url }}" data-likes='{{obj.likes.count}}' href="{{ obj.get_api_like_url }}"> {{obj.likes.count }} | 
    {% for person in obj.likes.all %} 
        {{ person.userprofile.first_name }} 
    {% endfor %}<i class="fab fa-gratipay"></i> </a>
</li>

在我的 jQuery 代码中：

$(function(){

$(".like-btn").click(function(e)
{
    e.preventDefault();

    var this_ = $(this);
    var likeUrl = this_.attr("data-href");
    console.log("likeUrl: ", likeUrl);

    var likeCount = parseInt(this_.attr("data-likes")) | 0 ;

    var addLike = likeCount;
    var removeLike = likeCount;

    if (likeUrl)
    {
        $.ajax(
        {
            url: likeUrl,              // likeUrl returns the get_api_like_url of the footer Ex/ likeUrl = {{ project.get_api_like_url }} 
            method: "GET",             // 
            data: {},                  // data to be sent to the server
            success: function(data)
            {
                console.log(data);
                console.log('**********************************');
                console.log("Success!");
                console.log("Likes: ", data.likes_num );
                console.log("liked by: ", data.liked_by );
                console.log("data: ", data)

                if(data.liked)
                {
                    updateText(this_, data.likes_num, "Unlike", data.liked_by);


                }
                else
                {
                    updateText(this_, data.likes_num, "Like", data.liked_by);
                }
                console.log("updated the count button")

            },
            error: function(error)
            {
                console.log("error: ", error)
            }
        })

    }

});

function updateText(btn, newCount, verb, extra){
    btn.text(newCount + " " + verb + " " + extra); // e.g. 2 like or 1 unlike
 }

});

以下是完整的 REST 框架代码：

类 ProFormaLikeAPI(APIView): #authentication_classes = (authentication.SessionAuthentication,) permission_classes = (permissions.IsAuthenticated,)

def get(self, request, pk=None, format=None):        
    user = self.request.user
    the_pk = pk
    updated = False
    liked = False

    obj = get_object_or_404(Project, pk=the_pk)
    the_url = obj.get_absolute_url()

    if user.is_authenticated():

        if user in obj.likes.all():
            liked = False
            obj.likes.remove(user)

        else:
            liked = True
            obj.likes.add(user)


        likes_num = obj.likes.all().count()

        if likes_num > 1:
            people = 'persons'
        else:
            people = 'person'

        liked_by = [ user.userprofile.first_name for user in obj.likes.all() ]
        updated = True

    data = {'updated': updated,
            'liked': liked,
            'likes_num': likes_num,
            'liked_by': liked_by,
           }

    return Response(data)

标签： jquerydjangoajax

解决方案

您应该防止所有未来的 AJAX 请求被缓存（请参阅此讨论：防止浏览器缓存 AJAX 调用结果）。您可以在 jQuery 代码中使用缓存属性 (cache: false)：

     ...
 if (likeUrl)
    {
        $.ajax(
        {
            url: likeUrl,              // likeUrl returns the get_api_like_url of the footer Ex/ likeUrl = {{project.get_api_like_url }} 
            method: "GET",             // 
            data: {},
            cache: false,
            success: function(data)
            {
                console.log(data);
                console.log('**********************************');
       ...

也许问题出现在您面前是因为您在 Django 项目中使用了缓存（django memcached 和 ajax 请求）。

推荐阅读