环境:
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);
·······················
这里的 name也就是data[0].name,**data[0]指的是json格式里的第一个{}**里的内容。
当然,关于单片机这一处理也可以考虑使用cjson,具体使用网络上有其使用方法。
请教各位,笔者这里遇到的问题if(xmlhttp.readyState==4)在这里始终不进去,在浏览器端,F12进入开发者模式,进行前端的代码调试发现,数值最多到3,意思是可能没有接收完。
补充:网页是用vscode+插件:
chinese(中文包),
live server(鼠标右键就可以仿真在浏览器里),
vscode-icons(看的好看),会了吧(翻译插件)
建议先在vscode里把前端的功能测试好,再结合单片机进行总体测试。