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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

628閲覧

Djangoから受け取ったデータをAjaxで表示させたい

yyjfou

総合スコア35

Django

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/10/29 10:19

編集2020/10/29 12:47

Djangoから受け取ったデータをAjaxで表示させたいです。

djangoのviews.pyに

@csrf_exempt def top(request): if request.method == 'POST': jsn = json.loads(request.body.decode("utf-8")) jsn = jsn[0] print(jsn) else: jsn = {} return render(request, 'top.html', jsn)

とかいてtop.htmlに

<body> <div id="name"></div> <script> fetch("/top/") .then(response => response.json()) .then(jsn => { console.log(jsn) const name = document.getElementById('name'); name.textContent = jsn['name']; }) </script> </body>

と書きました。topメソッドにアクセスしてprint(jsn)を表示しましたが、jsnに中身が入っていることが確認できました。
しかしtop.htmlには何も表示されませんでした。
fetchはajaxのメソッドではないのでしょうか?topメソッドにアクセスしたら、urlをロードしなくてもtop.htmlの内容が自動でajaxで書き換わることを想定しています。

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

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

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

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

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

guest

回答1

0

fetchでデータを取得したからといってそのデータが表示できるわけではなく、
top.htmlにhtmlで表示できるようにする必要があります。

javascriptを利用して、jsnの内容をDOMを利用してHTMLを構築しましょう。

投稿2020/10/29 12:38

t_obara

総合スコア5488

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

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

yyjfou

2020/10/29 12:48

ありがとうございます。htmlをリライトしたのですが、まだ何も表示されませんでした・・・。よかったらまたお願いします
t_obara

2020/10/30 00:57

ブラウザにエラーが出ていないか、jsn['name']の内容はから出ないかを確認して見ましょう。
yyjfou

2020/10/31 03:28

console.log(jsn) がundefined です。何が問題でしょうか?
t_obara

2020/11/01 05:38

「print(jsn)を表示しましたが、jsnに中身が入っていることが確認できました。」との記載ですが、undefinedという事は取得できていないということかと。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問