http实时刷新数据Ajax，stm32单片机

生命像饼干一样

已于 2024-04-17 18:09:32 修改

阅读量317

点赞数 2

文章标签： http 单片机网络协议

于 2024-03-22 14:40:25 首次发布

本文链接：https://blog.csdn.net/qq_45413289/article/details/136939179

版权

环境：
keil，vscode，stm32f407，lwip

涉及到技术：ajax

一.前端代码

<!DOCTYPE html>

<html>

<head>	
	<meta http-equiv=X-UA-Compatible content="IE=11">

<style>
</style>

<script>
	function myFun(){
		var xmlhttp;
		if(window.XMLHttpRequest){
			xmlhttp = new XMLHttpRequest();
		}else{
			alert('不支持');
		}
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState==4&&xmlhttp.status ==200){
			//console.log(xmlhttp.responseText)
			//document.getElementById("a").value = xmlhttp.responseText;
					let data = JSON.parse(xmlhttp.response);
					document.getElementById('a').value=data[0].name;
                        

			}
		}
		xmlhttp.open("GET","/read.json",true);
		//xmlhttp.open("GET","readfalsh.cgi",true);
		xmlhttp.send();
	}
</script>

</head>

<body>
    <p>hello </p>
	<p> <input name="123"  id="a"></p>
	<button type="button" onClick="myFun()">点击</button>
</body>

</html>

xmlhttp.open(“GET”,“/read.json”,true);
这里的true就是异步刷新，如果使用false就是要同时刷新网页。

调用方法:

1、直接调用 myFun 函数： 在页面底部的 <script> 标签中添加如下代码：

·······················
myFun();
</script>

2、使用按钮触发：

<button type="button" onClick="myFun()">点击</button>

二、单片机发送json格式文件给http

·······················
else if((strncmp(data, "GET /read.json",14)==0)){
	//char XML[50];
	//sprintf(XML,"[{\"name\":\"%d\"}]",server_port);
	//tcp_write(pcb,XML,strlen(XML),TCP_WRITE_FLAG_COPY);
	tcp_write(pcb,"[{\"name\":\"1\"}]",19,TCP_WRITE_FLAG_COPY);


·······················