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

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

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

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

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

Q&A

解決済

1回答

2763閲覧

djangoでajaxを用いてpostしてDBの値を書きかえたい

yhori3

総合スコア7

Django

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

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

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

0グッド

0クリップ

投稿2020/11/15 09:09

編集2020/11/17 08:15

djangoの学習中です。
ネット上のニュース記事のタイトルとURLをmodelとしてmysqlに入れて一覧として表示するページにそのURLへのクリック数をカウントしたいと考えています。
models.pyは

models.py

1class News(models.Model): 2 news_title = models.TextField() 3 news_url = models.TextField() 4 view_number = models.IntegerField(blank=False, default=0)

views.pyは

views.py

1def news_list(request): 2 news = News.objects.order_by('id').reverse() 3 if request.method == 'POST': 4 view_number =int(request.POST['view_number']) 5 news_number =int(request.POST['news_number']) 6 viewd_news = get_object_or_404(News, id=news_number) 7 viewed_news.view_number += view_number 8 viewd_news.save() 9 10 return render(request, 'mysite/news.html', {'news':news})

count.jsは

count.js

1$(function() { 2 // csrf_tokenの取得に使う 3 function getCookie(name) { 4 var cookieValue = null; 5 if (document.cookie && document.cookie !== '') { 6 var cookies = document.cookie.split(';'); 7 for (var i = 0; i < cookies.length; i++) { 8 var cookie = jQuery.trim(cookies[i]); 9 // Does this cookie string begin with the name we want? 10 if (cookie.substring(0, name.length + 1) === (name + '=')) { 11 cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); 12 break; 13 } 14 } 15 } 16 return cookieValue; 17 } 18 19 function csrfSafeMethod(method) { 20 // these HTTP methods do not require CSRF protection 21 return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); 22 } 23 24 for(let number =1;number<=1000;number ++){ 25 26 $('.news_'+number).click(function() { 27 28 $.ajax({ 29 type: 'POST', 30 url: './news', 31 data: { 32 view_number: 1, 33 news_number: number, 34 }, 35 beforeSend: function(xhr, settings) { 36 if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 37 xhr.setRequestHeader("X-CSRFToken", csrf_token); 38 } 39 }, 40 }); 41 42 43 }); 44 45 } 46});

としています。
count.jsはDjango ajaxでpostする。csrf_tokenもつける。のページを参考に作っています。
ページには

<span class='news_{{newsのid}}'><a href='newsのurl'>タイトル</a></span>

という表示でニュースを並べており、記事の隣にクリック数を表示できるようにクリックされた際にview_numberの値を増やすようにしたいのですが、上のコードでurlから記事に飛んでもview_numberは変わりませんでした。
count.jsは読み込めており、特にエラーは出ていないのですが、どこを直せばよいでしょうか?

[追記]
count.jsの

beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrf_token); } },

の部分をコメントアウトしてURLをクリックすると
Forbidden (CSRF token missing or incorrect.): /news
Forbidden (CSRF token missing or incorrect.): /news
[17/Nov/2020 17:09:42] "POST /news HTTP/1.1" 403 2556
[17/Nov/2020 17:09:42] "POST /news HTTP/1.1" 403 2556
のようなログが出て、CSRF tokenが見つからないとのことですが、上記のコードを再度挿入してクリックしてもリンクに飛ぶだけでPOSTのログは出てきません。

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

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

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

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

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

guest

回答1

0

自己解決

解決しました!!count.jsでいろいろと不足している部分がありました。

投稿2020/11/17 08:47

yhori3

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問