Put JSON

Envoyer des données JSON depuis une page HTML en utilisant JavaScript vers une API Flask via une requête GET

D'accord, je comprends mieux maintenant. Vous souhaitez envoyer des données JSON depuis une page HTML en utilisant JavaScript vers une API Flask via une requête GET. Voici comment vous pouvez le faire :

Étape 1 : Créer une route Flask pour recevoir les données JSON

Vous devez créer une route dans votre application Flask qui accepte les paramètres de requête GET et les traite.

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    # Récupérer les paramètres de la requête GET
    name = request.args.get('name')
    age = request.args.get('age')
    city = request.args.get('city')

    # Créer un dictionnaire avec les données reçues
    data = {
        "name": name,
        "age": age,
        "city": city
    }

    # Renvoyer les données en JSON
    return jsonify(data)

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

Étape 2 : Envoyer les données JSON depuis JavaScript

Vous pouvez utiliser JavaScript pour envoyer une requête GET avec des paramètres de requête à votre API Flask. Voici un exemple de code HTML et JavaScript :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Send JSON to Flask</title>
</head>
<body>
    <button id="sendData">Send Data</button>

    <script>
        document.getElementById('sendData').addEventListener('click', function() {
            // Données JSON à envoyer
            const data = {
                name: "John Doe",
                age: 30,
                city: "New York"
            };

            // Convertir les données JSON en paramètres de requête
            const queryString = new URLSearchParams(data).toString();

            // URL de l'API Flask
            const url = `http://127.0.0.1:5000/api/data?${queryString}`;

            // Envoyer une requête GET à l'API
            fetch(url)
                .then(response => response.json())
                .then(data => {
                    console.log('Réponse de l\'API:', data);
                })
                .catch(error => {
                    console.error('Erreur:', error);
                });
        });
    </script>
</body>
</html>

Explication

1. Création de la route Flask :
2. La route /api/data est définie pour répondre aux requêtes GET.
3. Les paramètres de la requête GET sont récupérés à l'aide de request.args.get.

4. Les données reçues sont renvoyées en JSON à l'aide de jsonify.

5. Envoi des données JSON depuis JavaScript :

6. Un bouton HTML est utilisé pour déclencher l'envoi des données.
7. Les données JSON sont converties en paramètres de requête à l'aide de URLSearchParams.
8. La méthode fetch est utilisée pour envoyer une requête GET à l'API Flask avec les paramètres de requête.
9. La réponse de l'API est affichée dans la console.

Exécution

1. Lancer l'application Flask :
2. Exécutez le script Flask pour démarrer le serveur.

3. Par défaut, Flask s'exécute sur http://127.0.0.1:5000.

4. Ouvrir la page HTML :

5. Ouvrez la page HTML dans un navigateur.
6. Cliquez sur le bouton pour envoyer les données JSON à l'API Flask.

En suivant ces étapes, vous pouvez envoyer des données JSON depuis une page HTML en utilisant JavaScript vers une API Flask via une requête GET.