c++和web交互

Qt WebKit Widgets (Deprecated) WebKit1 and QWidget-based classes from Qt 4.

please use module Qt WebEngine Widgets instead.

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

using std::string;

typedef struct
{
    string firstName;
    string lastName;
    string gender;
    string updates;
}UserInfo;


namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

public:
    QString makeJson(UserInfo &userInfo);

    //c++ ——> web
    void callJS(QString);

private:
    Ui::Widget *ui;

private:
//    UserInfo userInfo;

public slots://注意网页调用c++函数要声明为槽函数
    //web ——> c++
    void cpp_submit(QString strUserinfo);

private slots:
    void on_btnSubmit_clicked();
    void on_webView_loadFinished(bool arg1);
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

#include <QWebFrame>
#include <QJsonDocument>
#include <QJsonObject>
#include <QScriptEngine>

#include <QDir>
#include <QDebug>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    //load方法：debug加载延迟，release正常

    ui->webView->load(QUrl("qrc:/test.html"));//加载资源文件
//    ui->webView->load(QUrl(QString("file:///%1/test.html").arg(QDir::currentPath())));//加载本地文件


//    //setHtml方法：
//    QFile file(QString("%1/test.html").arg(QDir::currentPath()));
//    if(file.open(QFile::ReadWrite))//注意
//    {
//        qDebug() << "open success";

//        ui->webView->setHtml(QLatin1String(file.readAll()));
//    }
}

Widget::~Widget()
{
    delete ui;
}

QString Widget::makeJson(UserInfo &userInfo)
{
    QString firstName = QString::fromLocal8Bit(userInfo.firstName.c_str());
    QString lastName = QString::fromLocal8Bit(userInfo.lastName.c_str());

    QJsonObject json;
    json.insert("firstname", firstName);
    json.insert("lastname", lastName);
    json.insert("gender", userInfo.gender.c_str());
    json.insert("updates", userInfo.updates.c_str());

    QJsonDocument document;
    document.setObject(json);
    QByteArray byte_array = document.toJson(QJsonDocument::Compact);
    QString json_str(byte_array);
    return json_str;
}

void Widget::callJS(QString str)
{
    ui->webView->page()->mainFrame()->evaluateJavaScript(str);

}

void Widget::cpp_submit(QString strUserinfo)
{
    /*QJsonParseError json_error;
        QJsonDocument parse_doucment = QJsonDocument::fromJson(strUserinfo.toLatin1(), &json_error);
        if (json_error.error == QJsonParseError::NoError)
        {
            if (parse_doucment.isEmpty())
            {
                qDebug() << "the json is empty";
                return;
            }
            if (parse_doucment.isObject())
            {
                QJsonObject jsonObject = parse_doucment.object();
                QStringList jsonList = jsonObject.keys();
                for (int i = 0; i < jsonList.count(); i++)
                {
                    qDebug() << jsonList.at(i) << "\n";
                }
            }
        }*/

    QScriptEngine engine;
    QScriptValue sc = engine.evaluate("value=" + strUserinfo);

    ui->FirstEdit->setText(sc.property("firstname").toString());
    ui->LastEdit->setText(sc.property("lastname").toString());
    QString strGender = sc.property("gender").toString();
    if (strGender == "male")
    {
        ui->MaleBtn->setChecked(true);
    }
    else
    {
        ui->FeMaleBtn->setChecked(true);
    }
    QString strCheck = sc.property("updates").toString();
    if (strCheck == "true")
    {
        ui->checkBox->setChecked(true);
    }
    else
    {
        ui->checkBox->setChecked(false);
    }
}


void Widget::on_btnSubmit_clicked()
{
//    UserInfo userInfo;
//    userInfo.firstName = ui->FirstEdit->text().toStdString();
//    userInfo.lastName = ui->LastEdit->text().toStdString();


    string firstName = "张";//注意直接用string类型的中文赋值带来的问题
    string lastName = "三";
    UserInfo userInfo;
    userInfo.firstName = firstName;
    userInfo.lastName = lastName;

    if (ui->MaleBtn->isChecked())
    {
        userInfo.gender = ui->MaleBtn->text().toStdString();
    }
    else
    {
        userInfo.gender = ui->FeMaleBtn->text().toStdString();
    }
    if (ui->checkBox->isChecked())
    {
        userInfo.updates = "true";
    }
    else
    {
        userInfo.updates = "false";
    }

    callJS(QString("setUserInfo('%1')").arg(makeJson(userInfo)));

}

void Widget::on_webView_loadFinished(bool arg1)
{
    ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("Dialog", this);

}

main.cpp

#include "widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

test.html

<html>
<head>
    <script>
        function setUserInfo(userInfo) {
            var firstname = document.getElementById("firstname");
            var lastname = document.getElementById("lastname");
            var genderMale = document.getElementById("genderMale");
            var genderFemale = document.getElementById("genderFemale");
            var updates = document.getElementById("updates");

            var json = JSON.parse(userInfo);
            firstname.value = json.firstname;
            lastname.value = json.lastname;
            genderMale.checked = (json.gender=="male"?true:false);
            genderFemale.checked = (json.gender=="female"?true:false);
            updates.checked = (json.updates=="true"?true:false);
        }

        function submitUserInfo() {
            var firstname = document.getElementById("firstname");
            var lastname = document.getElementById("lastname");
            var genderMale = document.getElementById("genderMale");
            var genderFemale = document.getElementById("genderFemale");
            var updates = document.getElementById("updates");

            var result = {};
            result.firstname = firstname.value;
            result.lastname = lastname.value;
            result.gender = (genderMale.checked?"male":(genderFemale.checked?"female":""));
            result.updates = (updates.checked?"true":"false");
            Dialog.cpp_submit(JSON.stringify(result));
        }
    </script>
</head>
<body>
<h1>
    The Green People Book Club
</h1>

<p>
    Welcome to The Green People Book Club. Please register to obtain a membership with us.
</p>
<form onsubmit="submitUserInfo()">
    <table>
        <tbody>
        <tr>
            <td>First name:</td>
            <td><input type="text" id="firstname"></td>
        </tr>
        <tr>
            <td>Last name:</td>
            <td><input type="text" id="lastname"></td>
        </tr>
        <tr>
            <td>Gender:</td>
            <td>
                <input type="radio" name="gender" id="genderMale" value="Male"> Male
                <input type="radio" name="gender" id="genderFemale" value="Female"> Female
            </td>
        </tr>
        <tr>
            <td colspan="2">
            <input type="checkbox" id="updates">Check here if you would like to receive regular updates from us:
            </td>
        </tr>
        </tbody>
    </table>
    <input type="submit" value="Submit">
</form>
</body>
</html>

QWebView使用意点：
1.QWebView会多次触发loadFinished信号。