在使用Ajax时，我应该为visuals客户端和服务器端编写逻辑吗？

Question

我想知道如何在Facebook上，你会这样：

对此（在客户端）：

但是如果你要刷新页面，它会说：

这是否意味着Facebook在前端和后端都有逻辑来显示这样的信息？

或者逻辑只存在于前端，服务器只是告知客户端用户喜欢哪些帖子？我问的原因是因为我试图用这个来实现类似的东西：

我需要它来更新按钮上的计数器，并根据您的选择相应地对它们进行着色，但是，我将“重复”服务器端和客户端的视觉逻辑，这似乎不实用..

如果我使用PHP，您将如何着色这些按钮？或者我应该传递一堆信息并让客户端脚本决定？

Answer 1

它将在前端设置相应的“Like”显示，并向后端发送一条消息，表明它已被点击。这是一个数据游戏，只要你能保持两端一致，你就不需要重新加载任何东西，把任何东西存放在cookie中等等。事实上，在客户端永久存储任何东西都是没有用的，因为如果我移动机器，突然间我不再得到“你喜欢的东西”的标志。

Facebook和类似网站实现此效果的方式是，他们会检查您是否是喜欢该帖子的人之一。这发生在后端。因此，例如，您可能会从后端获得一个JSON字符串（如果格式化方面的JSON字符串错误，请告诉我）：

   { 'Posts':
          { 
               'Title': 'Foos are cool!', 
               'Content' : 'They totally are, don\'t even argue!',
               'youLike' : 1,
               'likeCount' : 10
           }
   }

其中youLike: 1表示您在加载页面之前的某个时间“喜欢”了帖子。单击“喜欢”或“不喜欢”按钮时，前端的JavaScript会进行适当的HTML更改以反映数据。然后它通知事件的后端。让我们说你不像什么，但你还没有重新加载页面。当你按下“不像”按钮（或者这些天的任何东西）时，javascript将对前端进行适当的更改，然后向后端发送信号。信号可能如下所示：

  { 'Action' : 'Like', 'Value' : 0, 'PostID' : 123534234, 'UserID' : 1234234 }

通知后端前端的值现在为0或false。因此，后端现在可以将其解释为“相似值设置为0”并进行适当的更改。

因此，当您重新加载页面时，您现在获得youLike: 0而不是之前的youLike: 1

我希望你回答一下你的问题。如果您需要我澄清任何事情，请告诉我！