[QT]在qml里使用Ajax

基于qml对js的支持,我们可以直接在qml里调用Ajax进行网络通信,当然,jQuery貌似不能正常的在qml里运行(瞎猜的,没试过,又能用的大佬一定告诉我).在誊写本文之前,关于在qml里进行Ajax通信的博文很少(貌似只有一篇,而且只有get实例,本文的ajax.js就是来自那篇博文),所以我决定自己记录一下.

so,我们需要自己准备一个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);
        }
    }
}

直接在你的工程目录里新建一个ajax.js,然后把上面的代码拷贝上就好了.

然后在Qt Creator里右键qml.qrc文件,添加现有文件,然后把刚刚的ajax.js添加进去

然后在你需要的ajax的qml文件里用import “ajax.js” as Ajax引入ajax文件

然后就能使用ajax了.

栗子如下:

import QtQuick 2.10
import QtQuick.Controls 2.3

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Stack")

    // ... ...

    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")
                    }
        )
    }


}

嗯,基本上用法就这样,根据自己的需要修改参数,回调函数,灵活运用就好啦~