0.前言
前些时间顺着Yeelink学习了RESTFUL，使用PHP和Slim框架尝试实现简单的REST API，树莓派可通过GET方法获得JSON数据包，通过这种方式实现了树莓派和服务器（我的PC）的互动。但是由于没有WEB前端，所以只能使用cURL工具或直接修改数据库的方式改变LED状态，体验非常差。
REST API入门体验可参考：
【PHP再学习4—— slim框架学习和使用】
【PHP再学习5——RESTFul框架 远程控制LED】
受到【开源IOT——一个最小的物联网系统设计方案及源码】一文的影响。我决定除了服务器和嵌入式侧之外，我应该再多做一些。
0.1 代码仓库
如果您想查看本例的效果，请点击【京东云擎】
或者扫描二维码使用手机浏览器查看运行效果——
如果你想查看本例的代码，请点击【京东云擎代码仓库】
本人只是一个认真的初学者，如果有问题请邮件我。
0.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://localhost/api/leds；若获得HTTP响应，响应内容在data中。
2.$.each( data.rows,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",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 最终效果