Faire de l'AJAX avec QML

Simple HTTP JSON Request in QML, Le gros avantage de QML c'est de pouvoir utiliser du JavaScript directement avec Qt.
JSON avec QML

API REST

Premièrement, supposons que l'on veut communiquer avec une API REST qui retourne des données sous le format JSON

Ici nous allons utiliser le service jsonplaceholder en faisant un simple GET : https://jsonplaceholder.typicode.com/posts/1

QML

Créons une application basique sous Qt comme ceci

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Salut Cyril !")
}

Ajoutons un bouton pour lancer la requête AJAX et un label pour afficher le retour de celle-ci

GridLayout {
    id: grid
    columnSpacing: 10
    rowSpacing: 10
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    rows: 2
    columns: 1

    Button {
        id: requestButton
        text: "Ajax"   
    }
    Label {
        id: txtResponse
        text: "Réponse..."
        anchors.horizontalCenter: parent.horizontalCenter
        }
}

Maintenant créons une fonction pour effectuer la requête AJAX en pur JavaScript

Elle appel notre fonction callback si le retour est OK :

    // Fonction requette AJAX
    function request(url, callback) {
        var http = new XMLHttpRequest();
        http.open("GET", url, true);
        http.onreadystatechange = function () {
          if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
              callback(http)
          }
        };
        http.send();
    }

A partir de là, tout est en place, il suffit d’implémenter le clique sur le bouton :

Button {
	id: requestButton
	text: "Ajax"
	onClicked: {
		request('https://jsonplaceholder.typicode.com/posts/1', function (o) {
		// affiche dans la console le retour JSON
		console.log(o.responseText);
		// Convertir la reponse en objet
		var d = eval('new Object(' + o.responseText + ')');
		// Affiche les elements depuis le json
		if(d) {
			console.log(d);
			txtResponse.text = "Titre:n" + d.title + "nnCorps:n" + d.body;
		}
		});
	}

}

 Code final

voici ce que donne le code final

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: applicationWindow
    visible: true
    width: 640
    height: 480
    title: qsTr("Salut Cyril !")

// Fonction requette AJAX
    function request(url, callback) {
        var http = new XMLHttpRequest();
        http.open("GET", url, true);
        http.onreadystatechange = function () {
          if(http.readyState === XMLHttpRequest.DONE && http.status === 200) {
              callback(http)
          }
        };
        http.send();
    }


    GridLayout {
        id: grid
        columnSpacing: 10
        rowSpacing: 10
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        rows: 2
        columns: 1

        Button {
            id: requestButton
            text: "Ajax"
            onClicked: {
                request('https://jsonplaceholder.typicode.com/posts/1', function (o) {
                // affiche dans la console le retour JSON
                console.log(o.responseText);
                // Convertir la reponse en objet
                var d = eval('new Object(' + o.responseText + ')');
                // Affiche les elements depuis le json
                if(d) {
                    console.log(d);
                    txtResponse.text = "Titre:n" + d.title + "nnCorps:n" + d.body;
                }

                });
            }

        }

        Label {
            id: txtResponse
            text: "Réponse..."
            anchors.horizontalCenter: parent.horizontalCenter
        }

    }
}



Ceci nous montre que l'on peut facilement utiliser des composants JS et manipuler des données au format JSON. avec Qt


Write a comment

@

What is the last letter of the word qitp? :