質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

1回答

1348閲覧

django 非同期処理がうまくいかない エラー内容 Page not found (404)

etcetera

総合スコア24

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2021/09/18 07:19

編集2021/09/19 08:57

twitterのような、いいね機能を実装する際に非同期処理でデータのやり取りを行いたいのですが、うまくいきません.ajax処理の部分にfailを追加してエラー処理を行ってみた結果、コンソールには下記のように表示されました。

ajax通信に失敗しました
home.js:39 jqXHR : 404
home.js:40 textStatus : error
home.js:41 errorThrown : undefined

Uncaught ReferenceError: url is not defined

これをみるとurlを定義する部分でエラーが起こっているようなのですが、この部分は参考にしているwebサイトと全く同じで、どこが間違っているかわかりません。
コードを載せますので原因がわかる方がいたらお願いします。

home.html(コードの一部)

1{% for tweet in tweetmodel_list reversed %} 2 <div class="tweet-container container border border-secondary"> 3 <p class="font-bold d-flex"><img src="{{ tweet.user.ProfileImage.url }}" width="50px" height="50px" style="border-radius: 100%;" class="me-3">{{ tweet.user.username }} 4 {% if user == tweet.user %} 5 <button type="button" class="btn btn-danger del_confirm" data-bs-toggle="modal" data-bs-target="#DeleteModal" data-deleteurl="{% url 'TweetDelete' tweet.id %}">削除</button> 6 {% endif %} 7 </p> 8 <p class="tweet-text">{{ tweet.content | linebreaksbr }}</p> 9 {% if tweet.snsImage %} 10 <p><img src="{{ tweet.snsImage.url }}" width="70%" style="border-radius: 5%;" class="bg-light"></p> 11 {% endif %} 12 13 14 <form action="{% url 'like' %}" method="POST">{% csrf_token %} 15 {% if tweet.id in liked_list %} 16 <button id="like" name="{{tweet.id}}"><i class="fas fa-lg fa-heart like-red"></i></button> 17 {% else %} 18 <button id="like" name="{{tweet.id}}"><i class="far fa-lg fa-heart"></i></button> 19 {% endif %} 20 </form> 21 <p name="{{tweet.id}}-count" class="count"> {{ tweet.like_set.count }} </p> 22 </div> 23 {% endfor %}

views.py

1class HomeView(LoginRequiredMixin,generic.ListView): 2 //省略 3 4 def get_context_data(self): 5 context = super().get_context_data() 6 liked_list = [] 7 8 for tweet in context['tweetmodel_list']: 9 liked = tweet.like_set.filter(user=self.request.user) 10 if liked.exists(): 11 liked_list.append(tweet.id) 12 13 context['liked_list']=liked_list 14 return context 15 16 17def LikeFunc(request): 18 if request.method =="POST": 19 tweet = get_object_or_404(TweetModel, pk=request.POST.get('tweet_id')) 20 user=request.user 21 liked = False 22 like = Like.objects.filter(tweet=tweet, user=user) 23 if like.exists(): 24 like.delete() 25 else: 26 like.create(tweet=tweet, user=user) 27 liked = True 28 29 context={ 30 'tweet_id': tweet.id, 31 'liked': liked, 32 'count': tweet.like_set.count(), 33 } 34 35 if request.is_ajax(): 36 return JsonResponse(context) 37

urls.py

1urlpatterns = [ 2 path('signup/',signupView.as_view(),name='signup'), 3 path('login/',loginFunc,name='login'), 4 path('logout/',logoutFunc,name='logout'), 5 path('home/',HomeView.as_view(),name='home'), 6 path('tweet/',TweetView.as_view(),name='tweet'), 7 path('TweetDelete/<int:tweet_pk>',tweet_del,name='TweetDelete'), 8 path('profile_edit/<int:pk>',profile_editView.as_view(),name='profile_edit'), 9 path('like/',LikeFunc, name='like'), 10] 11

models.py

1class TweetModel(models.Model): 2 content=models.TextField() 3 user=models.ForeignKey(CustomUser,verbose_name='紐づくユーザー',on_delete=models.PROTECT,blank=True) 4 snsImage=models.ImageField(null=True,blank=True,upload_to='') 5 6 7 def __str__(self): 8 return self.content[:10] 9 10class Like(models.Model): 11 tweet=models.ForeignKey(TweetModel,on_delete=models.CASCADE) 12 user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)

home.js

1$(document).ready(function(event){ 2 $(document).on('click', '#like', function(event){ 3 event.preventDefault(); 4 $.ajax({ 5 type: 'POST', 6 url: "{% url 'like' %}", 7 data: { 8 'tweet_id': $(this).attr('name'), 9 'csrfmiddlewaretoken': '{{ csrf_token }}'}, 10 dataType: 'json' 11 }) 12 .done(function(response){ 13 selector = document.getElementsByName(response.tweet_id); 14 if(response.liked){ 15 $(selector).html("<i class='fas fa-lg fa-heart'></i>"); 16 } 17 else { 18 $(selector).html("<i class='far fa-lg fa-heart'></i>"); 19 } 20 selector2 = document.getElementsByName(response.tweet_id + "-count"); 21 $(selector2).text(response.count); 22 }) 23 .fail(function (jqXHR, textStatus, errorThrown) { 24 // 通信失敗時の処理 25 alert('ファイルの取得に失敗しました。'); 26 console.log("ajax通信に失敗しました"); 27 console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得 28 console.log("textStatus : " + textStatus); // タイムアウト、パースエラー 29 console.log("errorThrown : " + errorThrown.message); // 例外情報 30 console.log("URL : " + url); 31 }); 32 }); 33}); 34

コードは、関係していると思われる部分を抜粋していますので、足りないところがあれば、教えてください。

参考にしたサイトです↓
https://h-memo.com/how-to-make-a-like-button-using-django/

※追記
urlが読み込まれないのはjavascriptを外部スクリプトとしてhtmlに読み込んでいたため、{% url 'like'%}が認識されていなかったからでした。
ですが、今度は

Page not found (404) No TweetModel matches the given query.

というエラーが出ていて、どうやらviews.py のLikeFunc関数の中にあるget_object_or_404でエラーがでているようです。
ここも参考サイトと同じ記述をしており原因がわかりません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

解決しました。
追記したPage not found (404)については単純にhtml の<script>タグを入れるのを忘れていてjavascriptが読み込まれていないだけでした。javascriptを読み込むと問題なく動作したので、元のエラーの原因は、本文に追記した通り、{% url 'like'%}が認識されていなかったからだと思います。

投稿2021/09/19 11:16

etcetera

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問