【QT】QT的学习：在QML中使用AJAX向某服务器发送请求获取数据

关注

转载最新推荐文章于 2026-06-12 16:28:07 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Qt WebEngineView与QML WebEngineView：桌面应用Web集成开发指南在现代桌面应用开发中，Web视图组件已成为处理HTML、JavaScript和Web内容的核心需求。其原理基于将Chromium浏览器内核嵌入应用，实现原生应用与Web技术的深度融合。这项技术的核心价值在于能够利用成熟的Web生态快速构建复杂UI，同时保持原生应用的性能和系统集成能力。在Qt框架中，主要通过QWebEngineView和QML WebEngineView两大组件实现，分别服务于传统的C++ Widgets应用和现代的声明式QML界面。实际应用场景包括企业级报表展示、在线地图集成、混合桌面应用阅读详情

转载自：https://blog.youkuaiyun.com/keysking/article/details/79920597

（1）准备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) {
        console.log("readyState", xhr.readyState, xhr.status)
        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)
                console.log("error status",  xhr.responseText, xhr.status)
                failure(xhr.responseText, xhr.status);
        }
    }
}

/*将json对象转成字符串*/
function urlQuery(jsonObject) {
    var query = "";
    var i = 0;
    for(var iter in jsonObject) {

        if(i>0) {
            query += "&";
        }
        if (Array.isArray(jsonObject[iter]))
        {
            query += iter +"=" + "[" +encodeURI(jsonObject[iter]) + "]";
        }
        else
        {
            query += iter +"=" + encodeURI(jsonObject[iter]);
        }

        //console.log("item1", iter,query)
        i++;
    }
    //console.log("url query:", query);
    return query;
}

（2）在qml中调用ajax：

import "qrc:/files/resource/file/Ajax.js" as Ajax

var positionPar = {
            "expoint": [180, 500],
            "exyaw": 90,
            "type": 000}
Ajax.post("http://XXXXXX", Ajax.urlQuery(positionPar),
                  function(result, json){         //成功后的回调函数
                        console.log(result)     //结果
                        console.log(json)       //结果的Json
                  },function (){              //失败后的回调函数
                        console.log("error")
                    }
        )

收录于