由于当前 C++ 项目需要使用 Ajax 库去 post 调用 ashx 接口, 接口地址如下所示:
需要传递的参数如下:
然后发现 qml 比较好调用 Ajax.JS 库, 所以本章通过 C++ 界面去获取 qml 方法来实现调用 ashx 接口 (以一个 C++ 界面 demo 程序为例)
1. 抓 post 数据
通过网页获取到的 post 数据如下所示:
所以查询 20191121~20191122 期间时则填入内容: "deptCode=021&startDate=20191121&endDate=20191122"
2. 导入 Ajax.JS 库
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);
- }
- }
- }
3. 写 main.qml
- import QtQuick 2.3
- import QtQuick.Windows 2.2
- import "ajax.js" as Ajax
- Item {
- function getWrenchTools(deptCode,startDate,endDate) {
- console.log("Got message:", deptCode,startDate,endDate) // 打印参数数据
- Ajax.post("http://10.194.102.253/WLPTService/Pages/Tools/GetNLToolsByDeptCode.ashx","deptCode="+deptCode+"&startDate="+startDate+"&endDate="+endDate+"",
- Widget.invokeFunc);
- }
这里表示定义一个 getWrenchTools() 方法, 当 post 成功并返回数据时, 则调用 Widget.invokeFunc() 回调函数 (Widget: 该 qml 对应的 C++ 类, 后面会讲怎么捆绑的)
4.widget 界面如下
然后写 widget.h
- #ifndef WIDGET_H
- #define WIDGET_H
- #include <QWidget>
- #include <QString>
- #include <QDebug>
- #include <QTimer>
- #include <QQmlApplicationEngine>
- #include <QQmlComponent>
- namespace Ui {
- class widget;
- }
- class widget : public QWidget
- {
- Q_OBJECT
- QQmlApplicationEngine engine;
- QObject *engineObject; // 指向运行的 qml 对象
- public:
- explicit widget(QWidget *parent = 0);
- ~widget();
- private:
- Ui::widget *ui;
- public:
- Q_INVOKABLE void invokeFunc(QVariant data1,QVariant data2);
- private slots:
- void on_pushButton_clicked();
- };
- #endif // WIDGET_H
写 widget.cpp
- #include "widget.h"
- #include "ui_widget.h"
- #include <QTimer>
- #include <QQmlContext>
- widget::widget(QWidget *parent) :
- QWidget(parent),
- ui(new Ui::widget)
- {
- ui->setupUi(this);
- engine.rootContext()->setContextProperty("Widget",this);
- // 将 QML 中的 Widget 变量指向为当前类. 从而使 QML 和 widget 类连接起来
- engineObject = QQmlComponent(&engine, "qrc:/main.qml").create(); // 创建 qml 并获取运行中的 qml 对象
- }
- widget::~widget()
- {
- delete ui;
- }
- void widget::invokeFunc(QVariant data1,QVariant data2)
- {
- ui->plainTextEdit->setPlainText(data1.toString());
- }
- void widget::on_pushButton_clicked()
- {
- QVariant depatment= "021";
- QVariant start= ui->start->text();
- QVariant end = ui->end->text(); //"结束日期"
- QMetaObject::invokeMethod(engineObject, "getWrenchTools",Q_ARG(QVariant, depatment)\
- ,Q_ARG(QVariant, start),Q_ARG(QVariant, end));
- }
engine.rootContext()->setContextProperty("Widget",this) 的作用:
将 QML 中的 Widget 变量指向为当前类. 从而使 QML 和 widget 类连接起来, 然后 main.qml 如果 post 成功则调用当前类的 invokeFunc(QVariant data1,QVariant data2) 方法, 从而实现数据返回.
当按下同步按钮时, 则调用 on_pushButton_clicked():
由于 engineObject 指向运行中的 qml 对象, 然后我们通过 invokeMethod() 就可以方便的请求调用 qml 对象中的 getWrenchTools() 函数. 从而实现 post 请求
点击同步后, 效果如下所示 (然后可以参考 50.Qt-QJsonDocument 读写 JSON 来提取数据):
来源: https://www.cnblogs.com/lifexy/p/12088454.html