ajaxを用いたいいね機能の実装について
Q&AClosed
いいね機能の実装がうまくいかない
現在、djangoでTwitterのようなアプリを作成しています。Ajaxを利用した、いいね機能を実装したいのですが、いいねボタンを押しても全く反応がありません。
該当するソースコード
#いいねボタンを置きたいテンプレート
#post_datail.html
{% block main %}
<div class="container">
<h1>詳細</h1>
<div class="content_box">
<p>{{ tweet.content }}</p>
</div>
<p>{{ tweet.user }} {{ tweet.created_at }}</p>
<a href="javascript:void(0)" id="article_{{ tweet.id }}" class="like" name="{{ tweet.id }}" type="button">いいね ({{ tweet.like_count }})</a>
<a href="{% url 'tweets:delete' tweet.pk %}">
<button type="button" class="btn btn-outline-danger">削除</button>
</a>
<a class="reverse_button" href="{% url 'tweets:home' %}">
<button type="button" class="btn btn-primary btn-back">戻る</button>
</a>
</div>
{% endblock %}
{% block extrajs %}
<script type="text/javascript">
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
crossDomain: false, // obviates need for sameOrigin test
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(".like").on("click", function () {
var tweet_id = $(this).attr("name")
$.ajax({
type: "POST",
method: "POST",
url: tweet_id + "/like/",
data: {
"id": tweet_id
},
dataType: "json"
}).done(function(data){
$("#tweet_"+String(data["tweet_id"])).text("いいね " +"("+ String(data["tweet_like_count"]+")"));
})
});
</script>
{% endblock %}
#views.py
def LikeView(request, pk):
tweet = Tweet.objects.get(pk=pk)
tweet.like_count += 1
tweet.save()
tweet = get_object_or_404(Tweet, pk=pk)
return JsonResponse({"tweet_like_count": tweet.like_count, "tweet_id": pk})
#models.py
from django.db import models
from django.contrib.auth import get_user_model
User = get_user_model()
class Tweet(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
content = models.TextField(max_length=150)
created_at = models.DateTimeField(auto_now_add=True)
like_count = models.IntegerField(default=0)
def __str__(self):
return str(self.content)
#urls.py
app_name = "tweets"
urlpatterns = [
path("home/", views.HomeView.as_view(), name="home"),
path("create/", views.TweetCreateView.as_view(), name="create"),
path("<int:pk>/", views.TweetDetailView.as_view(), name="detail"),
path("<int:pk>/delete/", views.TweetDeleteView.as_view(), name="delete"),
path("<int:pk>/like/", views.LikeView, name="like"),
]
post_datail.htmlはbase.htmlを拡張しており、base.htmlの方でjQueryを読み込んでいます。
エラーのようなものはないのですが、いいねボタンを押しても何の反応もありません。
どこが間違えているのかわからないので、教えていただきたいです。
0
1Answer
This answer has been deleted for violation of our Terms of Service.