Javascript 与jQuery'；s阿贾克斯

目标：我正在尝试创建一个按钮，允许用户喜欢网站上的帖子（类似于Facebook的做法），除了按钮之外，该按钮还可以增加/减少喜欢的次数

问题：除了一个边缘的情况外，其他情况都很好。如果用户已经喜欢这篇文章，他可以不喜欢它，但不再喜欢它。“相似/不同”切换似乎不起作用，浏览器只向服务器发送“不同”请求。如果用户以前从未喜欢过该图像，则“喜欢/不喜欢”切换似乎可以正常工作

我利用post的data属性通过对这些属性进行操作来切换like/inspect请求。我目前正在通过Laravel框架使用PHP，并使用jQuery进行前端操作

favorite.js文件

$(function(){

    $('.favorite-button').click(function(){
        var $this=$(this);
        var post_id=$this.data('postId');

        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
        });



        if($this.data('favoriteId')){
            //decrement the favorite count
            count=$this.siblings('.favorite-count');
            count.html(parseInt(count.html())-1);

            //send ajax request
            var fav_id=$this.data('favoriteId');
            $this.removeData('favoriteId');
            $.ajax({
                url:'/post/'+post_id+'/favorite/'+fav_id,
                type:'DELETE',
                success: function(result){
                    console.log('post was unfavorited');
                },
                error: function(){
                    console.log('error: did not favorite the post.');
                }
            });
        }


        else{
            //update the favorite count
            count=$this.siblings('.favorite-count');
            count.html(parseInt(count.html())+1);

            //send ajax post request
            $.ajax({
                url:'/post/'+post_id+'/favorite',
                type:'POST',
                success: function(result){
                    //update the data attributes
                    $this.data('favoriteId',result['id']);
                    console.log(result);
                    console.log('post was favorited');

                },
                error: function(){
                    console.log('error: did not favorite the post.');
                }
            });
        }
    });
});

<div class="pull-right">
    <span class="marginer">
        @if(Auth::guest() || $post->favorites->where('user_id',Auth::user()->id)->isEmpty())
            <i  data-post-id="{{ $post->id }}" class="fa fa-heart fa-lg favorite-button"></i>
        @else
            <i  data-favorite-id="{{ Auth::user()->favorites()->where('post_id',$post->id)->first()->id }}" data-post-id="{{ $post->id }}" class="fa fa-heart fa-lg favorite-button"></i>
        @endif

        <span class="favorite-count">{{ $post->favorites->count() }}</span>
    </span>
</div>

HTML文件

$(function(){

    $('.favorite-button').click(function(){
        var $this=$(this);
        var post_id=$this.data('postId');

        $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
        });



        if($this.data('favoriteId')){
            //decrement the favorite count
            count=$this.siblings('.favorite-count');
            count.html(parseInt(count.html())-1);

            //send ajax request
            var fav_id=$this.data('favoriteId');
            $this.removeData('favoriteId');
            $.ajax({
                url:'/post/'+post_id+'/favorite/'+fav_id,
                type:'DELETE',
                success: function(result){
                    console.log('post was unfavorited');
                },
                error: function(){
                    console.log('error: did not favorite the post.');
                }
            });
        }


        else{
            //update the favorite count
            count=$this.siblings('.favorite-count');
            count.html(parseInt(count.html())+1);

            //send ajax post request
            $.ajax({
                url:'/post/'+post_id+'/favorite',
                type:'POST',
                success: function(result){
                    //update the data attributes
                    $this.data('favoriteId',result['id']);
                    console.log(result);
                    console.log('post was favorited');

                },
                error: function(){
                    console.log('error: did not favorite the post.');
                }
            });
        }
    });
});

<div class="pull-right">
    <span class="marginer">
        @if(Auth::guest() || $post->favorites->where('user_id',Auth::user()->id)->isEmpty())
            <i  data-post-id="{{ $post->id }}" class="fa fa-heart fa-lg favorite-button"></i>
        @else
            <i  data-favorite-id="{{ Auth::user()->favorites()->where('post_id',$post->id)->first()->id }}" data-post-id="{{ $post->id }}" class="fa fa-heart fa-lg favorite-button"></i>
        @endif

        <span class="favorite-count">{{ $post->favorites->count() }}</span>
    </span>
</div>

@如果（Auth:：guest（）| |$post->favorites->where（'user_id'，Auth:：user（）->id）->isEmpty（））
@否则
@恩迪夫
{{$post->收藏夹->计数（）}

---

除了解决我的问题外，如果您认为我不符合此任务的最佳实践，请发表评论。我想听听你的意见。

我建议替换

$this.data（'favoriteId'）

by

$this.attr（“数据收藏夹id”）

无处不在。这对我来说很重要。检查这个密码笔

---

但是我不知道为什么您的解决方案不起作用

我建议替换

$this.data（'favoriteId'）

by

$this.attr（“数据收藏夹id”）

无处不在。这对我来说很重要。检查这个密码笔

但是，我不知道为什么您的解决方案不起作用

JQuery

数据（'favoriteId'）

没有设置属性

数据收藏夹

，它只是一个运行时设置，它成为元素的属性，而不是属性（这不一样）

因此，Jquery数据不能由服务器端代码设置。

您可以在jquery文档中阅读更多关于

.Prop（）

：

对这种差异有一种解释。 编辑：做出了粗体的句子

JQuery

data（'favoriteId'）

不设置属性

data-favorite

，它只是一个运行时设置，它成为元素的属性，而不是属性（这不一样）

因此，Jquery数据不能由服务器端代码设置。

您可以在jquery文档中阅读更多关于

.Prop（）

：

对这种差异有一种解释。

---

编辑：做出了粗体的句子

不要试图使用jQuery，而是尽量简化“like/inspect/favorite/count”的操作

• 避免从刀片模板查询，只需将数据发送到视图

下面是我将如何处理这个问题，而不是让jQuery做繁重的工作

HTML/呈现

    <button  class='likebutton' data-identifier='1' data-state='liked'>Like</button>
<button class='favoritebutton' data-identifier='1' data-state='favorited'>Favorite</button>
<span class='count counts-1'>123</span>

PHP

//路由
路由：：post（'/posts/metadata/likes'，函数（）{
//身份验证检查
//处理状态/喜好
//例：答复
//使用json{'state'：notliked，'text'：''，'postID'：1}响应
});
路由：：post（'/user/metadata/favorites'，函数（）{
//身份验证检查
//处理状态/收藏夹
//使用json{'state'：favorited、'text'：'、'postID'：1}响应
});

与其尝试使用jQuery，不如尽量简化“喜欢/不喜欢/喜欢/计数”的操作

• 避免从刀片模板查询，只需将数据发送到视图

下面是我将如何处理这个问题，而不是让jQuery做繁重的工作

HTML/呈现

    <button  class='likebutton' data-identifier='1' data-state='liked'>Like</button>
<button class='favoritebutton' data-identifier='1' data-state='favorited'>Favorite</button>
<span class='count counts-1'>123</span>

PHP

//路由
路由：：post（'/posts/metadata/likes'，函数（）{
//身份验证检查
//处理状态/喜好
//例：答复
//使用json{'state'：notliked，'text'：''，'postID'：1}响应
});
路由：：post（'/user/metadata/favorites'，函数（）{
//身份验证检查
//处理状态/收藏夹
//使用json{'state'：favorited、'text'：'、'postID'：1}响应
});

您似乎没有正确处理该案例，我相信如果在发送ajax请求后刷新页面，您将获得所需的结果，并再次陷入同样的问题。发送AJAX请求后，您需要正确处理dom的更新，blade engine只呈现一次文档页面，您需要告诉它重新渲染并加载新页面，或者使用JSON响应并在客户端进行更新，这是什么意思。通过对比我的工作，你能告诉我什么是正确的案例吗？似乎你没有正确处理这个案例，我相信如果你在发送ajax请求后刷新你的页面，你会得到想要的结果，并且再次陷入同样的问题。发送AJAX请求后，您需要正确处理dom的更新，blade engine只呈现一次文档页面，您需要告诉它重新渲染并加载新页面，或者使用JSON响应并在客户端进行更新，这是什么意思。通过对比我的工作，你能告诉我什么是正确的案例吗？你的建议对我很有用。但我仍然不满意的是，我仍然不明白为什么它不起作用。在我看到有人给我解释之前，我将把这个问题留给别人。你的建议对我有效。但我仍然不满意的是，我仍然不明白为什么它不起作用。我将把这个问题留到有人给我解释之前。我知道区别，我没有表示我没有，这也没有回答我的问题。为什么在某些情况下我不能检测到元素的数据属性更改？这是我的问题我知道区别，我没有表示我没有，这也没有