Qt+QtWebApp开发笔记（五）：http服务器html中使用json触发ajax与后台交互实现数据更新传递

article/2025/10/2 6:08:42

若该文为原创文章，转载请注明原文出处
本文章博客地址：https://hpzwl.blog.csdn.net/article/details/131122772

红胖子网络科技博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中…

Qt开发专栏：三方库开发技术

上一篇：《Qt+QtWebApp开发笔记（四）：http服务器使用Session和Cookie实现用户密码登录和注销功能》
下一篇：《Qt+QtWebApp开发笔记（六）：http服务器html实现静态相对路径调用第三方js文件》


前言

  前面完成了页面的跳转、登录，很多时候不刷新页面就想刷新局部数据，此时ajax就是此种技术，且是异步的。
  本篇实现网页内部使用js调用ajax实现异步交互数据。
  在js中使用 ajax是通过XMLHttpRequest来实现的。


Demo

  在这里插入图片描述

下载地址

  链接：https://pan.baidu.com/s/1tJMTPhIIyVE40qWxRWcmVA?pwd=1234


Ajax与XMLHttpRequest

Ajax

  Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
  Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。使用JavaScript向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，JavaScript可在不重载页面的情况与Web服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。Ajax在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

  • Ajax可使因特网应用程序更小、更快，更友好。
  • Ajax是一种独立于Web服务器软件的浏览器技术。
  • Ajax基于Web标准：JavaScript、XML、HTML与CSS，在Ajax中使用的Web标准已被良好定义，并被所有的主流浏览器支持。
  • Ajax用程序独立于浏览器和平台。

  Web应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。但是，因特网应用程序并不像传统的桌面应用程序那样完善且友好。 通过 Ajax，因特网应用程序可以变得更完善，更友好。


XMLHttpRequest

  XMLHTTP是一组API函数集，可被JavaScript、JScript、VBScript以及其它web浏览器内嵌的脚本语言调用，通过HTTP在浏览器和web服务器之间收发XML或其它数据。XMLHTTP最大的好处在于可以动态地更新网页，它无需重新从服务器读取整个网页，也不需要安装额外的插件。该技术被许多网站使用，以实现快速响应的动态网页应用。例如：Google的Gmail服务、Google Suggest动态查找界面以及Google Map地理信息服务。
  XMLHTTP是AJAX网页开发技术的重要组成部分。除XML之外，XMLHTTP还能用于获取其它格式的数据，如JSON或者甚至纯文本。
  使用XMLHttpRequest来发送HTTP请求以实现网站和服务器之间的数据交换。
  XMLHttpRequest对象是Ajax的核心，它有许多的属性、方法和事件。

属性

readyState：当前状态

  当一个XMLHttpRequest对象被创建后，readyState属性标识了当前对象的状态。
  在这里插入图片描述

responseText：响应文本

responseText属性包含客户端接收到的HTTP响应的文本内容。

  • readyState为0、1、2时：为一个空字符串；
  • readyState为3时：为还未完成的响应信息；
  • readyState为4时：为含完整的响应信息；

statusText：状态文本

  描述了HTTP状态代码文本，并且仅当readyState属性值为3或4时才可用。检测返回结果的判断就是：

if(readyState===4 && statusText===200)
{……
}

  如我们的Demo：
  在这里插入图片描述

函数

open()：初始化请求

open(method, url, async, username, password)
  • 参数method：请求的类型，GET、POST、PUT、DELETE、HEAD类型，输入的时候使用大写；
  • 参数url：请求的资源地址，请求资源的web api地址；
  • 参数async：是否发送异步请求，true-异步请求，false-同步请求；
  • 参数username（可为空）：需要服务器验证访问用户时，设置username；
  • 参数password（可为空）：需要服务器验证访问用户时，设置password；

send()：发送请求

  调用open()方法后，再调用send()方法将请求发送。当open()方法中async参数为true（异步）时，在send()方法调用后立即返回，否则将会中断直到请求返回。

setRequestHeader()：设置头部信息

  设置请求的头部信息

getResponseHeader()：获取头部信息

  获取请求的头部信息

事件

  onreadystatechange：状态变化事件
  当readyState属性值发生改变时，就会触发onreadystatechang事件，代码中是依赖onreadystatechang进一步判断状态和状态文本来做处理。
  在这里插入图片描述


使用XMLHttpRequest的步骤

步骤一：在脚本中实例化XHMLHttpRequest

var xhr = new XMLHttpRequest();

步骤二：初始化请求open()

xhr.open('GET','/checkState/data',true);

步骤三：发送请求

xhr.send();

步骤四：书写事件处理函数并判断状态和状态文本

xhr.onreadystatechange = function() {if(xhr.readyState === 4 && xhr.status === 200){……}
}

步骤五：书写返回成功的js处理代码

document.getElementById("dt2").innerHTML = xhr.responseText;

Demo增量使用ajax交互过程

步骤一：准备代码模板

  准备之前的demo v1.3.0模板：
  在这里插入图片描述

步骤二：新增checkState.html页面

  下面是新增定时获取和手动按钮获取得html：
  在这里插入图片描述

步骤三：创建CheckStateRequestHandle处理

  新建了一个处理，特别是增加了对于ajax技术的路径处理
  在这里插入图片描述

  在这里插入图片描述

步骤四：将CheckStateRequestHandle接入

  在这里插入图片描述
  在这里插入图片描述


Demo源码

checkState.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>长沙红胖子Qt</title>
</head>
<body><p><a>这里是检测状态Demo v1.4.0了</a></p><p><a id="dt1">123.567</a></p><p><a id="dt2">123.567</a></p><p><a id="dt3">123.567</a></p><p><button onclick="reset()">清空</button></p><p><button onclick="getDt1()">获取</button></p><script>function reset() {document.getElementById("dt1").innerHTML="---.---";document.getElementById("dt2").innerHTML="---.---";document.getElementById("dt3").innerHTML="---.---";}function getDt1() {var xhr = new XMLHttpRequest();xhr.open('GET','/checkState/data',true);xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4 && xhr.status === 200){document.getElementById("dt1").innerHTML = xhr.responseText;}}}</script><script>/* 定时获取dt2 */function getDt2() {var xhr = new XMLHttpRequest();xhr.open('GET','/checkState/data',true);xhr.send();xhr.onreadystatechange = function() {if(xhr.readyState === 4 && xhr.status === 200){document.getElementById("dt2").innerHTML = xhr.responseText;}}}window.setInterval(getDt2, 1000);</script>
</body>

CheckStateRequestHandler.h

#ifndef CHECKSTATEREQUESTHANDLER_H
#define CHECKSTATEREQUESTHANDLER_H#include "httprequesthandler.h"using namespace stefanfrings;class CheckStateRequestHandler : public HttpRequestHandler
{
public:CheckStateRequestHandler(QObject *parent = 0);public:void service(HttpRequest& request, HttpResponse& response);private:QTextCodec *_pTextCodec;
};#endif // CHECKSTATEREQUESTHANDLER_H

CheckStateRequestHandler.cpp

#include "CheckStateRequestHandler.h"#include "DataManager.h"#include <QTextCodec>
#include <QApplication>#include <QDebug>
#include <QDateTime>
//#define LOG qDebug()<<__FILE__<<__LINE__
//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__
//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()
//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")
#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")using namespace stefanfrings;CheckStateRequestHandler::CheckStateRequestHandler(QObject *parent): HttpRequestHandler(parent)
{// 返回文本(我们需要在浏览器上看，所以将Qt内部编码都转成GBK输出即可，不管他本身是哪个编码）// WINDOWS: GBK  GB2312// LINUX  : urf-8
//    _pTextCodec = QTextCodec::codecForName("utf-8");_pTextCodec = QTextCodec::codecForName("GBK");
}void CheckStateRequestHandler::service(HttpRequest &request, HttpResponse &response)
{QString str;QString path = request.getPath();LOG << path;if(path == "/checkState"){// 为了方便，开始单独加载html文件做处理QString filePath = QString("%1/html/checkState.html").arg(qApp->applicationDirPath());QFile file(filePath);if(!file.open(QIODevice::ReadOnly)){str = QString("The URL is wrong, no checkState.html [%1]").arg(filePath);}else{str = file.readAll();file.close();}}else if(path == "/checkState/data"){str = DataManager::getInstance()->getDt1Value();}else {response.setStatus(404,"Not found");str = "The URL is wrong, no such document.";}// 返回文本(我们需要在浏览器上看，所以将Qt内部编码都转成GBK输出即可，不管他本身是哪个编码）
//    QByteArray byteArray = _pTextCodec->fromUnicode(str);QByteArray byteArray = str.toUtf8();response.write(byteArray);
}

工程模板v1.4.0

  在这里插入图片描述


上一篇：《Qt+QtWebApp开发笔记（四）：http服务器使用Session和Cookie实现用户密码登录和注销功能》
下一篇：《Qt+QtWebApp开发笔记（六）：http服务器html实现静态相对路径调用第三方js文件》


若该文为原创文章，转载请注明原文出处
本文章博客地址：https://hpzwl.blog.csdn.net/article/details/131122772


http://chatgpt.dhexx.cn/article/rF4tovfU.shtml

相关文章

webapp开发框架选择注意点

webapp开发框架选择注意点

webapp开发框架选择需要注意&#xff1a; 第一步&#xff1a;开发支持的语言类型 根据前端开发人员的能力&#xff0c;来选择webapp开发框架。 例如&#xff1a;前端人员只会写react 就要求webapp开发框架支持react。 第二步&#xff1a;查看webapp开发框架文档是否齐全 例…
阅读更多...
Qt+QtWebApp开发笔记（二）：http服务器日志系统介绍、添加日志系统至Demo测试

Qt+QtWebApp开发笔记（二）：http服务器日志系统介绍、添加日志系统至Demo测试

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/130762721 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…
阅读更多...
WebApp开发----数字角标

WebApp开发----数字角标

数字角标--有底色和无底色 数字角标一般和其它控件&#xff08;列表、9宫格、选项卡等&#xff09;配合使用&#xff0c;用于进行数量提示。 角标的核心类是.mui-badge&#xff0c;默认为实心灰色背景&#xff1b;同时&#xff0c;mui还内置了蓝色&#xff08;blue&#xff09…
阅读更多...
WebApp开发学习

WebApp开发学习

1.折叠面板 <!DOCTYPE html> <html> <head><meta charset"utf-8"><meta name"viewport" content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalableno" /><title></title…
阅读更多...
webApp开发心得

webApp开发心得

从事单页相关的开发一年有余&#xff0c;期间无比的推崇webapp的网站模式&#xff0c;也整理了很多移动开发的知识点&#xff0c;但是现在回过头来看&#xff0c;webapp究竟是好还是不好真是一言难尽哟&#xff01; webapp使用JavaScript修改页面&#xff1b;紧接着再从服务器…
阅读更多...
Qt+QtWebApp开发笔记（一）：QtWebApp介绍、下载和搭建基础封装http轻量级服务器Demo

Qt+QtWebApp开发笔记（一）：QtWebApp介绍、下载和搭建基础封装http轻量级服务器Demo

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/130631547 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…
阅读更多...
安卓WebApp开发-项目MiliSetu

安卓WebApp开发-项目MiliSetu

文章目录 目录 文章目录 前言 WebAPP开发 一、WebAPP是什么&#xff1f; 二、安装HBuilder X 1.HBuilder X 官网 2.创建一个app项目 3.项目文件 ​编辑 index 总结 前言 WebAPP开发 WebApp开发&#xff0c;是移动端程序的实现方式之一&#xff0c;是一种简单&#…
阅读更多...
关于webapp开发

关于webapp开发

最近想搞一个自用的手机app&#xff0c;但是Android开发给我的感觉是麻烦&#xff0c;想着web也可以制作手机app&#xff0c;于是去网上搜索了一番&#xff0c;最后下载了HBuilderX&#xff0c;然后开始搞&#xff0c;对于原生web&#xff0c;选择5App&#xff0c;默认模板就行…
阅读更多...
Web App 开发

Web App 开发

0. jQuery Mobile 介绍 jQM是为触控优化的移动web框架&#xff0c;用来设计响应式网站和跨平台移动开发的&#xff1b; &#xff08;这里的跨平台指的是可以运行在iOS、Android、BlackBerry、WindowsPhone各种平台上&#xff09; jQM的资料多而且详细、容易上手&#xff0c;对…
阅读更多...
【WebApp】webApp开发总结（集合转贴）

【WebApp】webApp开发总结（集合转贴）

为什么80%的码农都做不了架构师&#xff1f;>>> 【来源地址】 http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.htmlhttp://classjs.com/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/http://java-mans.iteye.com/blog/1639503http://www.z…
阅读更多...
iOS开发入门——项目创建

iOS开发入门——项目创建

iOS开发入门——项目创建 1、新建项目 2、项目模版 3、项目配置 配置好之后点下一步就好。。。。 4、确定存储位置 5、启动模拟器 这就是第一个空白项目的创建过程&#xff0c;后面将持续更新iOS开发学习经历。
阅读更多...
ios开发基础教程

ios开发基础教程

博客专栏 斯坦福iOS公开课笔记 文章&#xff1a;8篇 阅读&#xff1a;11187 IOS开发进阶 文章&#xff1a;9篇 阅读&#xff1a;34499 深入浅出Objective-C 文章&#xff1a;17篇 阅读&#xff1a;56719 IOS开发入门实例 文章&#xff1a;30篇 阅读&#xff1a;134894
阅读更多...
iOS开发学习指南

iOS开发学习指南

1. 提升你的英语水平 虽然知乎er的平均水平比较高&#xff0c;但是现实情况是很大一部分程序员的英文水平是不太过关的。那大概需要提升到什么水平呢&#xff1f;我觉得达到比较流畅的阅读技术文档及书籍&#xff0c;配合英文字幕可以比较轻松的观看wwdc的session的水平就可以…
阅读更多...
iOS开发入门——简单上手体验

iOS开发入门——简单上手体验

iOS开发入门——简单上手体验 下面我们正式进入对iOS即swift的探索了解&#xff0c;我们在上一篇iOS开发入门——项目创建中已经创建了一个项目&#xff0c;我们将基于它继续探索&#xff0c;如下图所示&#xff1a; 我们双击即可进入这个项目。 1、进入项目 进入项目后如下图…
阅读更多...
IOS开发之——入门

IOS开发之——入门

前言 目前主要的移动开发平台有&#xff1a;Android、iOS、WindowsPhone&#xff0c;前两者占据着绝大多数的终端应用&#xff0c;我们常说的移动开发就是指&#xff1a;Android和iOS开发。本位主要讲述IOS的开发。 Android、iOS系统架构对比 android是基于Linux内核设计的&…
阅读更多...
ios开发学习

ios开发学习

记录一下ios开发遇到好网站 http://www.cnblogs.com/kenshincui/p/3985090.html Kenshin Cuis Blog CODING 完美世界... iOS开发系列文章&#xff08;持续更新……&#xff09; 2014-09-21 22:17 by KenshinCui, 43498 阅读, 50 评论, 收藏, 编辑 iOS开发系列的文章&#xf…
阅读更多...
iphone开发教程(1) iOS大纲

iphone开发教程(1) iOS大纲

iOS 大纲 iOS 由操作系统和应用技术构成。虽然和 Mac OS X 共用了很多技术&#xff0c;但是 iOS 是专门为了移动设备而设计的。当然如果你以前做过 Mac OS X 的应用程序&#xff0c;你会发现很多相似之处&#xff0c;但是很多技术只能在 iOS 里面使用&#xff0c;比如支持多…
阅读更多...
ios app开发学习流程（入门到精通）

ios app开发学习流程（入门到精通）

一、xcode编译并运行app后&#xff0c;iphone模拟器已安装的app所在目录&#xff1a; &#xff03; 1. /Users/alpha/Library/Application Support/iPhone Simulator/5.1/Applications &#xff03; 2. 删除此目录下的app目录&#xff0c;即可清空模拟器里安装过的app &#xf…
阅读更多...
iOS开发系列课程(01) --- iOS编程入门

iOS开发系列课程(01) --- iOS编程入门

iOS概述 什么是iOS iOS是苹果公司为它的移动设备&#xff08;iPhone、iPad、iWatch等&#xff09;开发的移动操作系统。 iOS发展史 2007年苹果发布iPhone Runs OS X2008年更名iPhone OS2010年更名iOS2012年WWCD 2012上发布iOS 62013年WWCD 2013上发布iOS 72014年WWCD 2014上…
阅读更多...
iOS苹果开发者账号申请教程

iOS苹果开发者账号申请教程

只有苹果开发者账号才能上架App Store&#xff0c;苹果开发者需要年费&#xff0c;是苹果公司收的&#xff01; 开发者账号类型功能介绍 下面是个人苹果开发者申请步骤流程&#xff1a; 分五个步骤进行 1、注册苹果账号apple id 2、开启双重认证 3、下载Apple Developer应…
阅读更多...
推荐文章

Copyright @ 2022~2023