記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()+"}";
  

}