目标
- 一个嵌入式设备,完成API的编码,现需要设计一个网页界面,对API进行测试。这个网页是放在设备的webserver上供浏览器访问的。
小编主要是写c++的,奈何人不够,就被赶鸭子上架。一天整出个这个挺有成就感的,希望给相同遭遇的萌新一点参考。[\抱抱]
过程
- 使用dreamwaver创建简单的html框架,修改空控件名称
- 使用对控件添加动作
- 网页启动发送请求
- 请求数据填充控件
- 点击按钮发送请求
- 请求图片/显示图片
技术细节
就直接贴代码啦
网页启动发送请求&控件显示response内容
- html
<script>
freshall();
</script>
- js
function freshall() {
// alert("call freshall");
load_deviceinfo();
load_networksetting();
load_remain();
load_broadcastsetting();
}
function load_networksetting() {
//input_ip
//input_gateway
//input_mask
const Http=new XMLHttpRequest();
const url=serverPath+"/cgi-bin/query.cgi"+"?"+"{\"request_type\":1}";
Http.open("GET",url);
Http.send();
Http.onreadystatechange=e=>{
console.log(Http.responseText);
if (Http.readyState==4 && Http.status==200)
{
var json = JSON.parse(Http.responseText); //由JSON字符串转换为JSON对象
var returncode=eval('json.'+'returncode');
if(returncode == 0){
// alert("OPERATE SUCCEED");
var ip=eval('json.'+'data'+'.ip');
var mask=eval('json.'+'data'+'.mask');
var gateway=eval('json.'+'data'+'.gateway');
document.getElementById('input_ip').value=ip;
document.getElementById('input_mask').value=mask;
document.getElementById('input_gateway').value=gateway;
}
else{
alert("OPERATE FAILED");
}
}
}
}
load_deviceinfo(){
...
}
load_remain(){
...
}
load_broadcastsetting(){
...
}
点击按钮发送请求
- html
<input
name="Submit_shutdown"
type="button"
id="Submit_shutdown"
onclick="on_submit_shutdown_click()"
value="shutdown"
/>
- js
function on_submit_shutdown_click() {
const Http=new XMLHttpRequest();
const url=serverPath+"/cgi-bin/query.cgi"+"?"+"{\"request_type\":10}";
Http.open("GET",url);
Http.send();
Http.onreadystatechange=e=>{
console.log(Http.responseText);
if (Http.readyState==4 && Http.status==200)
{
var json = JSON.parse(Http.responseText); //由JSON字符串转换为JSON对象
var returncode=eval('json.'+'returncode');
if(returncode == 0){
alert("OPERATE SUCCEED");
}
else{
alert("OPERATE FAILED");
}
load_broadcastsetting();
}
}
}
请求图片并显示
- html
<img
id="img_show"
src='resouces/mm_product_lg.gif'
alt="large product photo"
width="396"
height="168"
border="0"
/>
//这里图片需要周期性获取
<script>
var intervalId = window.setInterval("load_testimage()", 3000);
</script>
- js
function load_testimage(){
// alert("load_testimage");
var image=document.getElementById('img_show');
//这里直接拿到的是图片数据而不是地址
image.src=serverPath+"/cgi-bin/query.cgi"+"?"+"{\"request_type\":7,\"random\":"+Math.random()+"}";
}