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

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

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

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Ajax

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

解決済

pythonから返す値をJSON形式でレスポンスしたい

hakuryuu
hakuryuu

総合スコア2

Django

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Ajax

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

2回答

0評価

0クリップ

449閲覧

投稿2022/01/28 02:15

開発環境

windows10
python 3.7.9
Django 2.2.2
PostgreSQL 10.18

解決したいこと

Djangoでアプリケーションを作っているのですが、Ajaxを使っていてpythonで返す値を最後Json形式に変換してから画面上にレスポンスを返したいです。

発生している問題・エラー

画面上にレスポンス返せても文字化けを起こしてしまう。
具体的には英語、数字は問題なく表示できるが日本語が文字化けしてしまう。UTF-8でコーディングしているのに"U3042"みたいな感じでUnicode形式になってしまう。

[{"model": "library.book", "pk": "3893814317", "fields": {"book_register_date": "2022-01-14T10:48:19", "book_author": "\u3042\u3060\u3061\u305f\u304f\u3084", "book_title": "test2", "book_sub_title": "test2", "book_sample_path": "test2", "book_publisher": "\u8db3\u7acb", "book_page_num": 1000, "book_genre": "A", "book_symbol": "A", "book_num": "A", "book_isbn_num": "1234567890128", "book_lend_count": 1, "book_sample_count": 1, "book_delete_flg": false, "book_lend_flg": false}}]

というように一部文字化けしてしまう

該当するソースコード

view.py

python

class LendView(generic.ListView, models.Model): template_name = "lend.html" paginate_by = 5 model = Book def scandisp(req): #カメラのプログラムを呼び出しています scandata = write_data.kasidasi() # 受け取ったデータをhtmlに渡す。 for list in scandata: data2 = Book.objects.filter(book_isbn_num = list) data3 = data2.only() #serializeでjson形式に変換 data_list = serializers.serialize("json", data3) #最後にレスポンス return JsonResponse(data_list, safe=False)

HTML部分

html

<body> <span>文字を入力した後にボタンを押してください</span> <br> <button type="button" id="lend" onclick="clickBtn()">貸出</button> <br> <span id="text"> </span>

javascript

<script> function clickBtn() { var txt = document.getElementById("lend").value; $.ajax({ url: "{% url 'library:scandisp' %}", method: 'GET', data: {"input_data": txt}, dataType: "json", contentType: "application/json", beforeSend: function(xhr, settings) { if (!csrfSafeMethod(settings.type) && !this.crossDomain) { xhr.setRequestHeader("X-CSRFToken", csrf_token); } }, error: function(xhr, status, error) { console.log("error") } }) .done(function(data) { var aaa = document.getElementById("text").textContent = data; var bbb = encodeURIComponent(aaa); document.getElementById('text2').innerText = bbb; console.log("text2"); }); // csrf_tokenの取得に使う 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; } // ヘッダにcsrf_tokenを付与する関数 function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method)); }; } </script>

自分で試したこと

python側でJSONへ変換する処理を変得てみたのですが、

data_list = serializers.serialize("json", data3) ↓ data_list = json.dumps(data3, ensure_ascii=False, encoding='utf8', indent=2) AttributeError: type object '' has no attribute 'abstract

とエラーが出てしまい解決せず。
scriptタグの中でエンコード方式を指定しても解決しませんでした。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Django

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

JavaScript

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

Ajax

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