djangoへajax通信した際のレスポンス受信について

前提・実現したいこと

python初心者です。
ajaxでdjangoにリクエストを送信し、リクエスト受信したdjangoはMySQLから必要なデータを取得し、クライアントにJSON形式で返す処理を実装したいです。

発生している問題

djangoからのレスポンスが連想配列っぽい単純な文字列として返されてしまいます。
イメージ
{COL1:'XXXX',COL2:'IIII',COL3:'6666'}{COL1:'VVVV',COL2:'SSV',COL3:'8888'}・・・

出来ればJSON形式（以下の様な）で取得したいのですが、python側のコーディングが分かりません。

json
1data:[
2  {
3    COL1:'XXXX',
4    COL2:'IIII',
5    COL3:'6666',
6  },
7  {
8    COL1:'VVVV',
9    COL2:'SSV',
10    COL3:'8888',
11  }
12]

該当のソースコード

python側では以下のとおり取得しています。

python
1    connection = MySQLdb.connect(
2        host='host01',
3        user='root',
4        passwd='XXXXX',
5        db='python')
6    # データベースへの接続とカーソルの生成
7    cursor = connection.cursor(MySQLdb.cursors.DictCursor)
8    # ここに実行したいコードを入力します
9    cursor.execute("SELECT * FROM testtbl limit 100")
10    # fetchall()で全件取り出し
11    rows = cursor.fetchall()
12    # 接続を閉じる
13    connection.close()
14    return HttpResponse(rows)

jQuery
1        var Url = 'http://host01:8081/myapp/getData/?limit=' + $('#txtLimit').val();
2        $.ajax({
3            type: "GET",
4            url: Url,
5            docType:"json",
6            success: function (data) {
7                console.log('data:',data); //本当はJson等のオブジェクト構造でデータを取得したいが、ただの文字列で返される。
8            },
9            error: function (data) {
10                console.error(data);
11            }
12        });
13
14

試したこと

python側のresponseをListにしたり、いろいろ試しましたが、いずれも文字列としてしかresponse受信できませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

私は、上記のMySQLがらみのAPIは分からないのですが、例えば {"data":'XXXX'} という値をJSONでJavaScriptに送りたい場合は、

Python
1return JsonResponse({"data":'XXXX'})

で送信して（公式docs：https://docs.djangoproject.com/ja/3.1/ref/request-response/#id4）、受け取る側では、（自分のコードの一部なのですが）jQueryは詳しくないのでfetchで書いています。また、JavaScript側からのrequestはPOSTになっていますが、GETに置き換えてください（csrftokenとbodyが不要になります）。

JavaScript
1return fetch(url, {
2            method: 'post',
3            headers: {
4                'Content-Type': 'application/json',
5                "X-CSRFToken": csrfmiddlewaretoken,
6            },
7            body: JSON.stringify(data)
8        })
9            .then(function (response) {
10                return response.json();
11            })
12            .then(function (response) {
13                value = response['data'];  //  'XXXX'をvalueに代入
14            })
15　　　　　　.catch(   // エラー処理
16            });