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

開発環境

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
1class LendView(generic.ListView, models.Model):
2    template_name = "lend.html"
3    paginate_by = 5
4    model = Book
5    
6    def scandisp(req):
7        #カメラのプログラムを呼び出しています
8        scandata = write_data.kasidasi()
9        # 受け取ったデータをhtmlに渡す。
10       
11        for list in scandata:
12            data2 = Book.objects.filter(book_isbn_num = list)
13            data3 = data2.only()
14
15       #serializeでjson形式に変換
16        data_list = serializers.serialize("json", data3)
17       #最後にレスポンス
18        return JsonResponse(data_list, safe=False)

HTML部分

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

javascript
1<script>
2    function clickBtn() {
3          var txt = document.getElementById("lend").value;
4
5          $.ajax({
6            url: "{% url 'library:scandisp' %}",
7            method: 'GET',
8            data: {"input_data": txt},
9            dataType: "json",
10            contentType: "application/json",
11            beforeSend: function(xhr, settings) {
12              if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
13                xhr.setRequestHeader("X-CSRFToken", csrf_token);
14              }
15            },
16            error: function(xhr, status, error) {
17              console.log("error")
18            }
19          })
20          .done(function(data) {
21            var aaa = document.getElementById("text").textContent = data;
22            var bbb = encodeURIComponent(aaa);
23            document.getElementById('text2').innerText = bbb;
24            console.log("text2"); 
25          });
26
27          // csrf_tokenの取得に使う
28          function getCookie(name) {
29            var cookieValue = null;
30            if (document.cookie && document.cookie !== '') {
31              var cookies = document.cookie.split(';');
32              for (var i = 0; i < cookies.length; i++) {
33                var cookie = jQuery.trim(cookies[i]);
34                // Does this cookie string begin with the name we want?
35                if (cookie.substring(0, name.length + 1) === (name + '=')) {
36                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
37                  break;
38                }
39              }
40            }
41            return cookieValue;
42          }
43
44          // ヘッダにcsrf_tokenを付与する関数
45          function csrfSafeMethod(method) {
46            // these HTTP methods do not require CSRF protection
47            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
48          };
49        }
50
51</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タグの中でエンコード方式を指定しても解決しませんでした。

回答2件

ベストアンサー

UTF-8でコーディングしているのに"U3042"みたいな感じでUnicode形式になってしまう。
"book_author": "\u3042\u3060\u3061\u305f\u304f\u3084"

それは Unicode Escape Sequence (UES) の結果だと思います。

UES というのは \uxxxx という形で表される Unicode 文字で、xxxx はその文字の Unicode コードになります。UES となる理由はシリアライザでエスケープ処理が行われているからで、フレームワークがそういう仕様になっているからだと思います。

追記

ちなみに ASP.NET Core MVC (Core v3.1 以降）ではデフォルトで UES が適用されます。興味があれば以下の記事を見てください。

ASP.NET Core MVC の Unicode Escape Sequence (UES)
http://surferonwww.info/BlogEngine/post/2020/03/11/aspnet-core-mvc-controller-json-method-replaces-non-ascii-characters-with-5cuxxxx.aspx

追記２

下のコメントに、

そのままデシリアライズしてエンコード前の文字列を取得できるはずで、UES を外す必要はないと思いますけど？

と書きましたけど具体的にどうなるかを以下にに追記しておきます。

下の画像を見てください。JavaScript のコードの変数 json に代入したのは質問にある JSON 文字列そのものです。日本語の部分はエスケープされたままになってます。それを JSON.parse で JavaScript オブジェクト（連想配列）にデシリアライズすると "book_author": "\u3042\u3060\u3061\u305f\u304f\u3084" はエスケープが解除されて画像の赤枠で囲ったように "あだちたくや" となっているのが分かりますか？

イメージ説明

質問の JavaScript のコードにある、

.done(function(data)

の data には、ajax での要求の結果期待通り JSON 文字列の応答が返ってきていれば、それをデシリアライズした JavaScript オブジェクト（画像のコードで言うと deserialised）が渡されているはずですので確認してみてください。

投稿2022/01/28 02:22

編集2022/01/28 05:17

SurferOnWww

総合スコア17941

回答へのコメント

hakuryuu

2022/01/28 03:03

リンク先の記事も読ませていただきました。フレームワークの仕様でこうなるとのことですが、リンク先のサンプルコードでエンコード方式を変えることができるという認識で合っていますでしょうか?

SurferOnWww

2022/01/28 04:35

> リンク先のサンプルコードでエンコード方式を変えることができるという認識で合っていますでしょうか? ASP.NET Core MVC の話ですので質問者さんのケース（Python ですか？）でどのようにできるかは自分は分かりません。元々エンコードするのはセキュリティ対策だそうで、そのままデシリアライズしてエンコード前の文字列を取得できるはずで、UES を外す必要はないと思いますけど？　（どうしても読めないとダメだとかのわからずやの客がいるとかなら話は別ですけど）

SurferOnWww

2022/01/28 05:02

上のコメントに、 > そのままデシリアライズしてエンコード前の文字列を取得できるはずで、UES を外す必要はないと思いますけど？と書きましたけど具体的にどうなるかを回答欄に追記しておきます。

hakuryuu

2022/01/28 06:15

とても分かりやすい回答ありがとうございました！

普通にfetchで受ければ普通に表示されます

javacript
1fetch('sample.json').then(res=>res.json()).then(console.log);

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  btn.addEventListener('click',async()=>{
4    const params={txt:document.querySelector('#lend').value};
5    const url='views.py?'+Object.entries(params).map(x=>x.map(encodeURIComponent).join('=')).join('&');
6    const data=await fetch(url).then(res=>res.json());
7    text.textContent=JSON.stringify(data);
8  });
9});
10</script>
11<input id="lend" value="てすと">
12<span>文字を入力した後にボタンを押してください</span>
13<button type="button" id="btn">貸出</button>
14<span id="text"></span>
15<span id="text2"></span>
16

投稿2022/01/28 02:19

編集2022/01/28 04:20

yambejp

総合スコア110945

回答へのコメント

hakuryuu

2022/01/28 02:58

javascriptをあまり触らないため書き方をよく理解していないのですが、書き方は .done(function(data) { document.getElementById("text").textContent = data; fetch('').then(res=>res.json()).then(console.log); で合っていますでしょうか？またfetch('')の中の相対パスはデータの送り主先(今回だとviews.pyというファイルからデータが送られてきています)のファイルを指定するので合ってますしょうか？

yambejp

2022/01/28 04:21 編集

受け取ったjsonデータはオブジェクトなのでtextContentには表示できないと思います命題ではlendのvalueをパラメータで渡す記述になっていますが、 lendってボタンですよね？なにかがおかしいと思います

hakuryuu

2022/01/28 04:36

なるほど。試行錯誤してみます！

あなたの回答