0.前言     前些时间顺着Yeelink学习了RESTFUL，使用PHP和Slim框架尝试实现简单的REST API，树莓派可通过GET方法获得JSON数据包，通过这种方式实现了树莓派和服务器（我的PC）的互动。但是由于没有WEB前端，所以只能使用cURL工具或直接修改数据库的方式改变LED状态，体验非常差。     前端框架体验：     【前端学习1——Bootstrap jquery ajax】     REST API入门体验可参考：     【PHP再学习4—— slim框架学习和使用】     【PHP再学习5——RESTFul框架 远程控制LED】     受到【开源IOT——一个最小的物联网系统设计方案及源码】一文的影响。我决定除了服务器和嵌入式侧之外，我应该再多做一些。
1.REST API     使用PHP Slim框架构造REST API。其中有两个API和本例有关，一个为获得所有LED信息，LED信息包括ID，描述和状态；另一个为更新LED状态，LED状态只有两种ON或者OFF，代表打开和关闭。 【获得全部LED信息】 HTTP 方法     GET HTTP URL      /api/leds HTTP 返回     如下图所示                     【说明】1.total代表记录总数，使用total主要便于分页处理                                  2.rows代表具体记录，rows之后为json数组                                  3.若在URL中没有指定page和rows，默认page为1，rows为10.简单说默认仅返回10个。

图1 GET方法获得LED信息
【更新某个LED状态】 HTTP 方法       PUT HTTP URL        /api/leds/<leds_id>/status HTTP 请求内容 {“status”:"on"}或{“status”:"off"} HTTP 响应        {“success”:“true”}或{"success":"false"}

图2 PUT请求分析 2.更新表格 【1】创建一个表格，但不填充内容 <div class="row"> <div class="span12"> <table class="table table-hover" id="ledsTable"> <thead> <tr> <th>编号 ID</th> <th>描述 DESC</th> <th>状态 STATUS</th> <th>动作 ACTION</th> </tr> </thead> </table> </div> </div>

【2】更新表格——ajax方法          【JS代码】 function updateAll() { // 动态表格内容 $.getJSON('http://localhost/api/leds',function(data){ // data.total 表示记录总数 // data.row 表示记录内容 console.log(data.total); $.each( data.rows , function( index , item){ // 取出 id description status var id = item.id; console.log(id); var description = item.description; console.log(description); var status = item.status; console.log(status); console.log(status); var btnStyle = 'btn-success'; var btnText; // 修改按钮样式，ON为绿色 OFF为白色 if( status == 'on'){ btnStyle = 'btn-success'; btnText = 'O N'; } else { btnStyle = 'btn-default'; btnText = 'OFF'; } // 插入一行，很遗憾 javascript没有 format var newRow = '<tr dev_id="' + id + '">' + '<td>' + id + '</td>' + '<td>' + description + '</td>' + '<td>' + status + '</td>' + '<td>' + '<button type="button" class="btn btn-xs ' + btnStyle + '">' + btnText + '</button>' + '</td>' + '</tr>'; $('#ledsTable').append(newRow); }); }); }

    【几点说明】     1.$.getJSON('http://localhost/api/leds',function(data)         使用ajax的getJSON方法，URL为；若获得HTTP响应，响应内容在data中。     2.$.each( data.rows , function( index , item)        使用each方法遍历所有data.rows内容——所有LED信息，LED信息位于item中，而index为序号（和LED ID还不太相同）     3.var newRow = '<tr dev_id="' + id + '">' +     给所有的tr标签加上了 dev_id属性，便于LED改变状态时获得编号。     4.$('#ledsTable').append(newRow);     增加到表格中。

3.按钮控制     【基本流程】     按下表格末尾的button，在按钮事件处理中（确切地说为回调处理）找到tr标签中的设备ID，再从该行的第2个td标签中找到text，该text为当前的LED状态，最后组装一个PUT请求翻转LED状态。     【JS代码】 $("table").delegate("button", "click", function(){ console.info($(this)); // 尝试获得 <button>text</button> console.log($(this).text()); var $tr_obj = $(this).parent().parent(); // tr元素中包含 dev_id属性 var dev_id = $tr_obj.attr('dev_id'); console.log( dev_id ); // 访问该tr元素的所有子td元素 var $td_obj = $($tr_obj).children("td"); // 所有td元素的第二个 var $status_obj = $($td_obj).eq(2); var status_str = $status_obj.text(); console.log(status_str); // 改变按钮样式 if( status_str == "on"){ $(this).removeClass('btn-success');$(this).addClass('btn-default'); $(this).text("OFF"); $status_obj.text("off"); send_ledctrl( dev_id , "off"); }else{ $(this).removeClass('btn-default');$(this).addClass('btn-success'); $(this).text("O N"); $status_obj.text("on"); send_ledctrl( dev_id , "on" ); } }); function send_ledctrl(dev_id, cur_status){ $.ajax({ url: '/api/leds/' + dev_id + '/status', // /api/leds/1 async: true, dataType: 'json', type: 'PUT', data: JSON.stringify({status:cur_status}), success: function(data, textStatus){ // 打印返回内容 {"success":true} console.log(data.success); }, error: function(jqXHR, textStatus, errorThrown){ console.log("error"); }, }); }

    【几点说明】     1. $("table").delegate("button", "click", function(){     使用table的委托方法，子类为button，事件为click。delegate可以为动态创建的标签增加事件，有别于on方法。          2.var $tr_obj = $(this).parent().parent();     获得tr标签，采用子类找父类的方法。在这里$tr_obj为一个jquery对象，所有前面加$以标记。     3.$(this).removeClass('btn-success');$(this).addClass('btn-default');     根据LED的状态，清除BUTTON的旧样式，获得新样式。

4.最终效果

图3 最终效果