记js和html设计简单设备管理界面

目标

• 一个嵌入式设备，完成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()+"}";
  

}