0.前言
前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没有WEB前端,所以只能使用cURL工具或直接修改数据库的方式改变LED状态,体验非常差。
前端框架体验:
REST API入门体验可参考:
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 , 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.最终效果
分享到:
相关推荐
前端页面:bootstrap js,jq,纯ajax的CRUD 后台:ssm简单整合,MBG生成Dao配置等 分页:pageHelper插件 校验:前端jq+JSR303 在线测试地址:chinadream.work/ssm
主要介绍了Ajax调用restful接口传送Json格式数据的方法的相关资料,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧
本例是从前端,以Ajax的形式向豆瓣RESTFul服务器发起请求的简单示例。
物联网学习笔记——构建RESTFul平台1-附件资源
前端项目-restful.js,用于与服务器端RESTful资源交互的纯JS客户机。思考无角度的重新调整。
+restful学习教程
NULL 博文链接:https://lsz1023-126-com.iteye.com/blog/2065472
2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,作为参考资料学习借鉴。 3、本资源作为“参考资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研,自行调试。 小说阅读...
物联网系统设计方案及对策及对策——RESTful.doc
C# 一个简单的 Restful 服务端和 Restful 客户端 Demo
restful rest webservice 构建小例子
WMS源码。包含VUE前端源码、后端java spring restful api 源码
STRUTS2 RESTFUL PLUGIN
基于REST的软件体系结构风格(Software Architecture Style)称之...按照REST原则设计的软件、体系结构,通常被称为“REST式的”(RESTful),在本文中以下称之为 RESTful Web服务,以便于和基于SOAP的Web服务区别。
CryptoCurrency_Tracker CryptoCurrency Tracker SPA,主要基于jQuery和Ajax(RESTful API)。主题: HTML + CSS 新HTML5标签CSS3媒体查询和高级选择器动态页面布局引导和伸缩JavaScript 对象回调,承诺,异步等待...
大部分对REST的介绍是以其正式的定义和背景作为开场的。但这儿且先按下不表,我先提出一个简单扼要的定义:REST定义了应该如何正确地使用(这和大多数人的实际使用方式有很大不同)Web标准,例如HTTP和URI。如果你在...
使用_Struts_2_开发_RESTful_服务
restful2个例子