Python JavaScriptから受け取ったjson辞書の中がリストの場合、

文字列化して、DBに書き出し、読み込みの例。

DBアクセスにはMySQL-Connectorを使用。

 

【Copilotの答えの始め】

 

以下は、PythonでJavaScriptから受け取ったJSON辞書の中のリストを文字列化し、MySQLデータベースに書き出し、再度読み込む例です。

前提

  • JSONデータ形式 (例):

1
2
3
4
 
{
    "id": 1,
    "items": ["apple", "banana", "cherry"]
}

使用するライブラリ:

  • MySQL-Connector (mysql.connector)

コード例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
import json
import mysql.connector

# データベース接続
db = mysql.connector.connect(
    host="localhost",
    user="your_username",
    password="your_password",
    database="your_database"
)

cursor = db.cursor()

# テーブル作成（必要なら）
cursor.execute("""
CREATE TABLE IF NOT EXISTS json_example (
    id INT PRIMARY KEY,
    items TEXT
)
""")

# JavaScriptから受け取ったJSONデータを処理
data = {
    "id": 1,
    "items": ["apple", "banana", "cherry"]
}

# リストを文字列化 (JSON形式)
items_str = json.dumps(data["items"])

# データベースに書き出し
cursor.execute("INSERT INTO json_example (id, items) VALUES (%s, %s) ON DUPLICATE KEY UPDATE items=%s", 
               (data["id"], items_str, items_str))
db.commit()

# データベースから読み込み
cursor.execute("SELECT * FROM json_example WHERE id = %s", (data["id"],))
result = cursor.fetchone()

# データを元に戻す（文字列 → リスト）
retrieved_items = json.loads(result[1])

# 出力確認
print("ID:", result[0])
print("Items:", retrieved_items)

# クローズ処理
cursor.close()
db.close()

コード解説

  1. データの文字列化 (json.dumps) Pythonのリストや辞書を文字列に変換するために json.dumps を使用します。

  2. データベースへの保存 JSON文字列は TEXT 型のカラムに保存できます。キー重複時には ON DUPLICATE KEY UPDATE で更新処理を行っています。

  3. データの復元 (json.loads) 文字列を再びリストとして利用するため、json.loads を使用しています。

  4. SQLインジェクション防止 プレースホルダ (%s) を使用することで、SQLインジェクションを防ぎ、安全なデータ挿入を実現しています。

必要に応じてデータベース設定やJSONフォーマットを調整してください。さらに発展的な部分を知りたい場合は教えてください！

 

【Copilotの答えの終わり】

 

retrieved_itemsをajaxで送信するプログラムとJavaScript側で元に戻すプログラム。

 

【Copilotの答えの始め】

 

以下は、Pythonから retrieved_items をAJAXを使ってJavaScriptに送信し、JavaScript側でデータを元に戻して処理するサンプルコードです。

Pythonサイド (Flaskを例にしたAPI)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/get_data', methods=['GET'])
def get_data():
    # Pythonのリスト（retrieved_items）をJSONで返す
    retrieved_items = ["apple", "banana", "cherry"]
    return jsonify(retrieved_items)

if __name__ == '__main__':
    app.run(debug=True)

  • Flask を使って簡単なAPIを作成しています。

  • /get_data エンドポイントにリクエストが来ると、リストをJSON形式で返します。

HTML & JavaScript (AJAX部分)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Example</title>
</head>
<body>
    <button id="fetchButton">Fetch Data</button>
    <div id="output"></div>

    <script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
 
        // ボタンがクリックされたときにデータを取得
        document.getElementById("fetchButton").addEventListener("click", () => {
            fetch("/get_data")
                .then(response => response.json()) // JSONデータを取得
                .then(data => {
                    console.log("Received Data:", data);

                    // データを復元する（この場合はリストとして利用可能）
                    const retrievedItems = data;

                    // 表示用の処理
                    document.getElementById("output").innerText = `Items: ${retrievedItems.join(", ")}`;
                })
                .catch(error => console.error("Error:", error));
        });

1
2
3
 
    </script>
</body>
</html>

コード解説

  1. Python側

    • Flaskを使用してAPIを構築しています。

    • retrieved_items をJSON形式でクライアントに送信します。

  2. JavaScript側

    • fetch を使ってPythonサーバーからデータをリクエストします。

    • JSON形式のレスポンスを受け取り、リストとして処理します。

    • join を使ってリストをカンマ区切りで表示しています。

  3. サーバーの起動

    • Flaskアプリを起動して、ブラウザでHTMLファイルを開いてください。ボタンをクリックするとデータが取得されます。

これで、PythonからJavaScriptへのデータ送信と処理の流れが実現できます！

 

【Copilotの答えの終わり】

 

 

 

 

風濤の迫り来るや春の雷