智能家居项目-2

【1】注册和找回密码功能，Index.html中设置如下跳转连接

<h4><a href="./register.html">&nbsp;&nbsp;注册账号</a>&nbsp;&nbsp;

<a href="./getpwd.html">&nbsp;&nbsp;找回密码</a></h4>

<h4><a href="./alterpwd.html">&nbsp;&nbsp;修改密码</a>&nbsp;&nbsp;

<a href="./alter_usr.html">&nbsp;&nbsp;修改用户名</a></h4>

 

以register.html为例子，调用register.js中函数

<inputtype="submit" value="提交"style="width:80; height:30"onclick="register()"> 

该函数中利用document.getElementById获得用户的注册信息，再利用XMLHTTP对象与register.cgi进行数据交互的。

//Cgi文件完成SQLite的操作（相当一个应用层的main函数的c文件）中第一句必须是这句

printf("Content-type:text/html \n\n");

利用从标准输入获得数据即是获得了XMLHTTP对象发来的数据，往标准输出写入数据即是相当于发送数据给XMLHTTP对象，该对象将数据给js负责前台展现。

 

【1】

Index.html中加载<script language="javascript" src="login.js"></script>

<INPUTvalue=" 登  陆 " type="submit"style="color:#007ab5"onclick="login()">

 

【2】login.js中如下跳转到主界面，加载主界面时候就可以对用户名和密码进行校验

//组织数据包:/home.html?usrname=ygm&pwd=111111

var url ="/home.html?"+"usrname="+usrname+"&pwd="+pwd;

//【这是跳转页面,指定当前链接到/home.html网页】

window.location.href = url;

 

【3】利用div和li标签布局，

      <div id="header">

                      <!--当点击网页条标签时执行login.js文件中的jump_page(0)函数-->

                      <h2onclick="jump_page(0)" >SunPlusApp Smart Home</h2>

                      <divid="topmenu">

                            <ul>

                                  <li><aonclick="jump_page(1)" >LED Control</a></li>

                                  <li><aonclick="jump_page(2)" >Send Message</a></li>

                                  <li><aonclick="jump_page(3)" >Home Humiture</a></li>

                                  <li><aonclick="jump_page(4)" >Home Monitor</a></li>

                             </ul>

                       </div>

      </div>

jump_page函数如下，即是跳转到不同的网页

functionjump_page(index)

{

      switch(index)

      {

           case 0:

           {

                 window.location.href ="/home.html?"+g_url_data;

           }

           break;

     

           case 1:

           {

                 window.location.href ="/led_control.html?"+g_url_data;

           }

           break;

 

           case 2:

           {

                 window.location.href ="/send_message.html?"+g_url_data;

           }

           break;

 

           case 3:

           {

                 window.location.href ="/home_humiture.html?"+g_url_data;

           }

           break;

 

           case 4:

           {

                 window.location.href =g_url+":8000?"+g_url_data;

           }

           break;

 

           case 0xFF:

           {

                 window.location.href = g_url;

           }

           break;

          

           default:

           {

                 ;

           }

           break;

      }

}

 

【4】led_control.html中调用led_control.js中函数

<tr>

      <th >< id='led1' onclick='switch_led(1)'></td>

      <th ><id='led2'onclick='switch_led(2)'></td>

      <th >< id='led3'onclick='switch_led(3)'></td>

</tr>

 

该函数中利用XMLHTTP对象与switch_led.cgi进行数据交互的

function switch_led(led_number)

{

      var xmlhttp_object = createXHR();

      var URL = "/cgi-bin/switch_led.cgi";

      var xmlhttp_status;

      var cmd1 = '&';

 

      switch(led_number)

      {

           case 1:

           {

                 if(g_led_flag & 0x01)

                 {

                      g_led_flag &=0x06;//xx0

                 }

                 else

                 {

                      g_led_flag |= 0x01;//xx1

                 }

           }

           break;

          

           case 2:

           {

                 if(g_led_flag & 0x02)

                 {

                      g_led_flag &=0x05;//x0x

                 }

                 else

                 {

                      g_led_flag |= 0x02;//x1x

                 }

           }

           break;

          

           case 3:

           {

                 if(g_led_flag & 0x04)

                 {

                      g_led_flag &=0x03;//0xx

                 }

                 else

                 {

                      g_led_flag |= 0x04;//1xx

                 }

           }

           break;

          

           case 4:

           {

                 if(g_allled_flag == 1)

                 {

                      g_led_flag = 0x00;//000

                      g_allled_flag = 0;

                 }

                 else

                 {

                      g_led_flag = 0x07;//111

                      g_allled_flag = 1;

                 }              

           }

           break;

          

           default:

           {

                 ;

           }

           break;

      }

   

      //根据传进来参数

      display_change(g_led_flag);

      cmd1 += g_led_flag;

     

      if(xmlhttp_object)

      {

           cmd1=encodeURI(cmd1);

           cmd1=encodeURI(cmd1);

           xmlhttp_object.open("POST",URL,false);//false:synchronous;true:asynchronous//

           xmlhttp_object.setRequestHeader("If-Modified-Since","0");

           //alert('cmd1 = ' + cmd1);

           //给switch_led.cgi发送数据,在switch_led.cgi中就要控制灯

           xmlhttp_object.send(cmd1);

           if(4 == xmlhttp_object.readyState)

           {

                 if(200 ==xmlhttp_object.status)

                 {

                      //alert(xmlhttp_object.responseText);

                      get_led_status();

                 }

           }

           xmlhttp_object = null;

      }

      else

      {

           alert('please check the Bowser!');

      }

}

 

【5】

switch_led.c文件即是相当于测试LED驱动的测试文件而已。

//cgi第一句必须是这句

printf("Content-type:text/html \n\n");

利用从标准输入获得数据即是获得了XMLHTTP对象发来的数据，往标准输出写入数据即是相当于发送数据给XMLHTTP对象，该对象将数据给js负责前台展现。