借用jQuery发送Http请求的实现（内附源码）

夏之七

已于 2023-08-04 09:14:51 修改

阅读量1k

点赞数

分类专栏：日积月累文章标签： jquery http qt

于 2023-06-22 10:33:01 首次发布

本文链接：https://blog.csdn.net/locahuang/article/details/131323963

版权

日积月累专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

一、前言

最近在解决项目上前同事开发的视频播放器问题，视频播放器是用Qt开发，作为播放插件供Web调用。

播放器与Web的通信方式采用的是Http，数据格式为Json，播放器插件收到Web发送的播放请求后，会根据接收到的视频播放参数播放对应设备的实时视频或录像。

为了更快地定位现场问题，我打算让现场使用Http工具模拟Web前端发送请求给视频播放器插件。
postman，大家应该都比较熟悉，这个工具咱们平时开发调试时用的比较多，不过因为受限于现场环境，第三方工具不能安装在项目上。

于是决定自己动手写个简单的http客户端工具，一开始想到使用Qt+curl开发个简单的界面工具，之所以要带界面主要是考虑现场人员操作的便利性。但结合问题点涉及到谷歌浏览器版本的兼容性，所以单以简单的界面工具并不能很好地模拟生产环境、定位问题。最后，经过考量，使用 jQuery 实现。

二、jQuery 介绍

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。jQuery 极大地简化了 JavaScript 编程。

jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

语言特点

快速获取文档元素
提供漂亮的页面动态效果
创建 AJAX 无刷新网页
提供对 JavaScript 语言的增强
增强的事件处理
更改网页内容

jQuery核心特性

具有独特的链式语法和短小清晰的多功能接口；
具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；
拥有便捷的插件扩展机制和丰富的插件。

三、jQuery 下载

jQuery官网地址： https://jquery.com/

打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载：

Production version - 用于实际的网站中，是已经被精简和压缩过的jQuery文件。
Development version - 用于测试和开发中，是未压缩的jQuery文件，可以方便阅读源码。

四、jQuery 使用

引用jQuery有2种方式，包括 离线引用 和 在线引用 。

1. 离线引用

离线引用，首先需要下载jQuery文件到本地，然后在HTML中使用引入jQuery，比如我们的jQuery文件为 jquery-3.7.0.js，引用示例如下：

<head>
	<script src="jquery-3.7.0.js"></script>
</head>

需要注意的是，script src引用文件的时候需要加上文件路径。
上面省略了路径是因为jquery-3.7.0.js与DEMO在同一目录下：
在这里插入图片描述

2. 在线引用

在线引用，简单的说是使用CDN（内容分发）的方式引用jQuery（要求联网）。

常见的CDN有：

//Google CDN
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
	</script>
</head>

//百度CDN
<head>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
	</script>
</head>

//新浪CDN
<head>
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
	</script>
</head>

//Staticfile CDN
<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
</head>

//Microsoft CDN
<head>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js">	
	</script>
</head>

//又拍云 CDN
<head>
	<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
	</script>
</head>

五、Http客户端DEMO实现

1. DEMO界面

在这里插入图片描述

2. DEMO源码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>VideoPlayer调试工具</title>
	<script src="jquery-3.7.0.js">
	</script>
	<script>
	$(document).ready(function(){
		$("#btn-play").click(function(){
			 $.ajax({
				type: "POST",
				url: "http://127.0.0.1:8090/video/play",
				contentType: "application/json; charset=utf-8",
				data: '{"devID": "123456","streamType": 1}',
				dataType: "json",
				success: function (message) {
					if (message > 0) {
					//	alert("请求已提交！");
					}
				},
				error: function (message) {
					//alert("请求提交失败！"+ message);
				}
			}); 
		});
		
		$("#btn-miniplayer").click(function(){
			 $.ajax({
				type: "POST",
				url: "http://127.0.0.1:8090/video/minShow",
				contentType: "application/json; charset=utf-8",
				data: '{"mode": 0}',
				dataType: "json",
				success: function (message) {
					if (message > 0) {
					//	alert("请求已提交！");
					}
				},
				error: function (message) {
					//alert("请求提交失败！"+ message);
				}
			}); 
		});
		
		$("#btn-getversion").click(function(){
			 $.ajax({
				type: "POST",
				url: "http://127.0.0.1:8090/video/getVersion",
				contentType: "application/json; charset=utf-8",
				data: '{"devID": "123456","streamType": 1}',
				dataType: "json",
				success: function (message) {
					if (message > 0) {
					//	alert("请求已提交！");
					}
				},
				error: function (message) {
					//alert("请求提交失败！"+ message);
				}
			}); 
		});
	});

	</script>
	</head>
	<body>

	<div id="div1"><h2>VideoPlayer调试工具</h2></div>
	<button id="btn-play">播放视频</button>
	<button id="btn-miniplayer">最小化播放器</button>
	<button id="btn-getversion">获取播放器版本信息</button>

	</body>
</html>