在Django中实现一个“like this”按钮,无需刷新页面

时间:2023-01-19 16:16:41

I'm attempting to replicate the "like project" feature used in ruby-toolbox (the heart button).

我正在尝试复制ruby-toolbox(心脏按钮)中使用的“like project”特性。

When you click the "like" button, it adds that project to your liked projects list, but it doesn't refresh the page in doing so. The html for the button contains just a link:

当您点击“like”按钮时,它会将这个项目添加到您喜欢的项目列表中,但是这样做并不会刷新页面。按钮的html只包含一个链接:

<a href="/projects/vanity/like" class="icon ... liked" id="like_1953"></a>

So, I would really like to know two things.

我想知道两件事。

(1) How does this button work?

这个按钮是怎么工作的?

(2) How do I replicate it using Django? Alternatively, if this isn't possible, how should I do it?

(2)如何使用Django复制它?或者,如果这是不可能的,我该怎么做?

Any help very much appreciated.

非常感谢您的帮助。

1 个解决方案

#1


3  

Here comes Ajax. When you need to update the content of a page without reloading the page, ajax is the solution. How does it work in Django? It depends. In a complex case, render_to_response and jquery.load(url) are really practical. In your simple case, you only need to send an ajax call to one of your view, read the answer and update the DOM element accordingly.

Ajax来了。当您需要在不重新加载页面的情况下更新页面内容时,ajax是解决方案。它在Django是如何工作的?视情况而定。在复杂的情况下,render_to_response和jquery.load(url)是非常实用的。在简单的情况下,只需向其中一个视图发送ajax调用,读取答案并相应地更新DOM元素。

The button is a trap. I can't find the javascript in the page, but surely there's some JS controlling these links. They at least need to:

这个按钮是个陷阱。我在页面中找不到javascript,但是肯定有一些JS控制这些链接。他们至少需要:

  • Update the link's image on hover, changing or toggling class, or directly setting image's url.
  • 在悬停、更改或切换类或直接设置图像的url时更新链接的图像。
  • Read the link id and keep only the string after 'like_', which will represent the object's primary key in the database.
  • 读取链接id并只保留“like_”后面的字符串,这将表示数据库中对象的主键。
  • Send an Ajax request to the server, using $.get, $.load or any Ajax function. He must be using GET or POST to send the object id.
  • 向服务器发送Ajax请求,使用$。,美元。加载或任何Ajax函数。他必须使用GET或POST发送对象id。
  • Wait for the answer (or not) and update DOM.
  • 等待答案(或否)并更新DOM。

How to make it work in Django? Like you would code the normal views!

如何在Django中工作?就像你会编码正常的视图一样!

  • Create a normal view with the usual entry in urls.py. Code the view as you would do it for a normal Like page. e.g. load user, check if already liked, if not, like, otherwise, unlike. The last line would change though. You could return a json object or just a string using HttpResponse, like '0' for 'not liked' and '1' for 'liked'.
  • 使用urls.py中的常规条目创建一个普通视图。对视图进行编码,就像对普通页面一样。例如:load user, check if already likes, if not, like, otherwise, different。最后一行会改变。您可以使用HttpResponse返回一个json对象或一个字符串,比如'not like '的'0'和'like ' '的'1'。

There'a recent tutorial here if you need more details.

如果您需要更多的细节,这里有最近的教程。

#1


3  

Here comes Ajax. When you need to update the content of a page without reloading the page, ajax is the solution. How does it work in Django? It depends. In a complex case, render_to_response and jquery.load(url) are really practical. In your simple case, you only need to send an ajax call to one of your view, read the answer and update the DOM element accordingly.

Ajax来了。当您需要在不重新加载页面的情况下更新页面内容时,ajax是解决方案。它在Django是如何工作的?视情况而定。在复杂的情况下,render_to_response和jquery.load(url)是非常实用的。在简单的情况下,只需向其中一个视图发送ajax调用,读取答案并相应地更新DOM元素。

The button is a trap. I can't find the javascript in the page, but surely there's some JS controlling these links. They at least need to:

这个按钮是个陷阱。我在页面中找不到javascript,但是肯定有一些JS控制这些链接。他们至少需要:

  • Update the link's image on hover, changing or toggling class, or directly setting image's url.
  • 在悬停、更改或切换类或直接设置图像的url时更新链接的图像。
  • Read the link id and keep only the string after 'like_', which will represent the object's primary key in the database.
  • 读取链接id并只保留“like_”后面的字符串,这将表示数据库中对象的主键。
  • Send an Ajax request to the server, using $.get, $.load or any Ajax function. He must be using GET or POST to send the object id.
  • 向服务器发送Ajax请求,使用$。,美元。加载或任何Ajax函数。他必须使用GET或POST发送对象id。
  • Wait for the answer (or not) and update DOM.
  • 等待答案(或否)并更新DOM。

How to make it work in Django? Like you would code the normal views!

如何在Django中工作?就像你会编码正常的视图一样!

  • Create a normal view with the usual entry in urls.py. Code the view as you would do it for a normal Like page. e.g. load user, check if already liked, if not, like, otherwise, unlike. The last line would change though. You could return a json object or just a string using HttpResponse, like '0' for 'not liked' and '1' for 'liked'.
  • 使用urls.py中的常规条目创建一个普通视图。对视图进行编码,就像对普通页面一样。例如:load user, check if already likes, if not, like, otherwise, different。最后一行会改变。您可以使用HttpResponse返回一个json对象或一个字符串,比如'not like '的'0'和'like ' '的'1'。

There'a recent tutorial here if you need more details.

如果您需要更多的细节,这里有最近的教程。