QML中AJAX的基本使用

红太狼 2022-12-12 02:10 470阅读 0赞

# 前言 #

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），通过构建一个 XMLHttpRequest 对象，异步的与服务端交换数据。

QML 除了能用 C++ 封装网络组件外，也可以使用 JS 的 AJAX 去请求网络数据。

对于 AJAX 的基本知识可以百度，或者 [菜鸟教程][Link 1] ，或者 [W3C教程][W3C] 。

# QML 中 GET 和 POST 基本使用 #

一个简单的例子如下，演示了 GET/POST 请求带字符串参数的收发：

import QtQuick 2.12
    
    Text{
        id: txt
        font.pixelSize: 30
    
        function request() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                //XMLHttpRequest.DONE为状态枚举值4
                if(xhr.readyState === 4) {
                    print('request DONE',xhr.status);
                    if(xhr.status === 200){
                        txt.text = xhr.responseText.toString();
                    }
                }
            }
            //【get】
            //xhr.open("GET", "http://127.0.0.1:54321/text?arg=Haha");
            //xhr.send();
            //【post】
            xhr.open("POST", "http://127.0.0.1:54321/text");
            //如果要使用post提交数据,添加此行
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send("arg=Xixi");
        }
    
        Component.onCompleted: request()
    }

GET 的时候，一般把表单参数放 URL，多个参数用一个 & 与号连接；POST 的时候，把表单参数放 send() 函数中，多个参数同样用 & 与号连接。

运行效果：

![20201005014502401.png][]

服务端 python Flask 代码：

from flask import Flask, jsonify, request
    
    app = Flask(__name__)
    
    #测试 get
    @app.route('/text', methods=['GET'])
    def testGetText():
        return 'Get '+request.args.get('arg')
    
    #测试 post
    @app.route('/text', methods=['POST'])
    def testPostText():
        return 'Post '+request.form['arg']
    
    if __name__ == '__main__':
        app.run(host='127.0.0.1', port=54321, debug=True)

# JSON 数据的传递  #

我们可以通过网络或者本地文件来获取 JSON 数据，代码如下：

import QtQuick 2.12
    
    ListView {
        id: view
    
        spacing: 10
        //model:['red','green','blue']
        delegate: Rectangle{
            width: ListView.view.width
            height: 30
            color: modelData
        }
    
        //请求网络数据
        function request() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    print('request DONE',xhr.status);
                    if(xhr.status === 200){
                        print(xhr.responseText.toString())
                        view.model = JSON.parse(xhr.responseText.toString());
                    }
                }
            }
            xhr.open("POST", "http://127.0.0.1:54321/json");
            xhr.setRequestHeader("Content-type", "application/json");
            //xhr.send("['red','green','blue','orange','cyan']");
            xhr.send(JSON.stringify(['red','green','blue','orange','cyan']));
        }
    
        //访问本地文件
        function requestLocal() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if(xhr.readyState === 4) {
                    print('request DONE',xhr.status);
                    if(xhr.status === 200){
                        print(xhr.responseText.toString())
                        view.model = JSON.parse(xhr.responseText.toString());
                    }
                }
            }
            //json文件的文本内容，字符串双引号：["red","green","blue"]
            xhr.open("GET", "qrc:/localfile.json");
            xhr.send();
        }
    
        Component.onCompleted: request()
        //Component.onCompleted: requestLocal()
    }

运行效果：

![20201005014525117.png][]

服务端 python Flask 代码：

from flask import Flask, jsonify, request
    
    app = Flask(__name__)
    
    #测试传 json
    @app.route('/json', methods=['POST'])
    def testModel():
        #return jsonify(['red', 'green', 'blue'])
        #request.json 只能够接受方法为POST、Body为raw，header 内容为 application/json类型的数据
        return jsonify(request.json)
    
    if __name__ == '__main__':
        app.run(host='127.0.0.1', port=54321, debug=True)

# 简易的封装  #

有人（[参考博客][Link 2]）将 GET/POST 做了简单的封装，可以参考下：

一个 ajax.js 文件：

// GET
    function get(url, success, failure)
    {
        var xhr = new XMLHttpRequest;
        xhr.open("GET", url);
        xhr.onreadystatechange = function() {
            handleResponse(xhr, success, failure);
        }
        xhr.send();
    }
    
    // POST
    function post(url, arg, success, failure)
    {
        var xhr = new XMLHttpRequest;
        xhr.open("POST", url);
        xhr.setRequestHeader("Content-Length", arg.length);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");  //用POST的时候一定要有这句
        xhr.onreadystatechange = function() {
            handleResponse(xhr, success, failure);
        }
        xhr.send(arg);
    }
    
    // 处理返回值
    function handleResponse(xhr, success, failure){
        if (xhr.readyState == XMLHttpRequest.DONE) {
            if (xhr.status ==  200){
                if (success != null && success != undefined)
                {
                    var result = xhr.responseText;
                    try{
                        success(result, JSON.parse(result));
                    }catch(e){
                        success(result, {});
                    }
                }
            }
            else{
                if (failure != null && failure != undefined)
                    failure(xhr.responseText, xhr.status);
            }
        }
    }

基本使用：

import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    Window {
        id: window
        visible: true
        width: 640
        height: 480
        title: qsTr("QML && AJAX")
    
        // ... ...
    
        function testGet(){
            Ajax.get("http://这里填网址.com?带好参数哦",
                        function(result, json){         //成功后的回调函数
                            console.log(result)     //结果
                            console.log(json)       //结果的Json
                        },function (){              //失败后的回调函数
                            console.log("error")
                        }
            );
        }
    
        function testPost(){
            Ajax.post("http://这里填api网址","参数名 = 参数内容",
                      function(result, json){         //成功后的回调函数
                            console.log(result)     //结果
                            console.log(json)       //结果的Json
                      },function (){              //失败后的回调函数
                            console.log("error")
                        }
            )
        }
    }

# 参考 #

书籍：QmlBook

博客：[https://blog.csdn.net/keysking/article/details/79920597][Link 2]

[Link 1]: https://www.runoob.com/ajax/ajax-tutorial.html
[W3C]: https://www.w3school.com.cn/ajax/index.asp
[20201005014502401.png]: /images/20221123/b374eb7f624b4b7a9c04cc1273f4a349.png
[20201005014525117.png]: /images/20221123/5633d49c282340abbcc35912c460c0b6.png
[Link 2]: https://blog.csdn.net/keysking/article/details/79920597