基于HTML模板和JSON数据的JavaScript交互(移动端)
写本文之前,我正在做一个基于Tab页的订单中心:
每点击一个TAB标签,会请求对应状态的订单列表。之前的项目,我会在js里使用+连接符连接多个html内容:
varhtml=''; html+='<divclass="empty-list">'+ '<divclass="iconicon-box"></div>'+ '<div>还没有订单</div>'+ '</div>';
Html内容少点还好,但是当内容多起来的时候,再使用这种方式,以后维护起来不方便,也影响美观,可阅读性差。
突然想起来PHP模板的相关知识,那么应该也有类似JavaScript模板一说。由于为了快速使用在项目上,就去网上找了找。还真有:
基于HTML模板和JSON数据的JavaScript交互
http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/
看了下文章,使用起来还是蛮简单的:
1、准备好html模板
<textareaclass="js-order-tmp"style="display:none;"> <!--goods-block--> <divclass="blockm-s-order"> <divclass="block-itemblock-news"> <ahref="<?phpechosite_url('order/detail/'.'$id$')?>"class="dis-blockexternal"> <divclass="item-img"> <imgsrc="$thumb$"/> </div> <divclass="item-intro"> <divclass="sub-l"> <pclass="t-order-num">订单号:$order_num$</p> <pclass="t-name">收件人:$cus_name$</p> <pclass="t-date">$create_time$</p> </div> <divclass="sub-r"> <pclass="t-expand"><spanclass="iconicon-right"></span></p> <pclass="t-flag">$flag_name$</p> </div> </div> <divclass="clear"></div> </a> </div> </div> <!--/goods-block--> </textarea> <textareaclass="js-no-order-tmp"style="display:none;"> <!--noorder--> <divclass="empty-list"> <divclass="iconicon-box"></div> <div>还没有订单</div> </div> <!--/noorder--> </textarea>
其中变量部分全部用variatevariate表示。
2、模板方法很简单,直接写一个基于字符串原型的扩展方法,确保全局可用:
String.prototype.temp=function(obj){ returnthis.replace(/\$\w+\$/gi,function(matchs){ varreturns=obj[matchs.replace(/\$/g,"")]; return(returns+"")=="undefined"?"":returns; }); };
主要使用到了正则知识。
3、准备json数据:
{ "ecd":0, "msg":"成功", "result":[{ "id":"32", "order_num":"test-001", "title":"test", "thumb":"http:\/\/40DA1265-40F6-D622-8BA5-04BA0AF72573.jpg", "item_id":"21", "price":"0.11", "cus_name":"test", "cus_tel":"10086", "cus_address":"北京北京海淀区", "flag":"5", "create_time":"20160329115544", "update_time":"20160330120001", "flag_name":"订单已取消" }], "locate":"" }
4、使用ajax显示数据
$.progress_show('正在努力加载中'); $.ajax({ url:site_url+'api/order/getAll/'+status, type:'get', dataType:'json', error:doAjax.error, success:function(response){ $.progress_hide(); if(response.ecd=='0'){ varhtmlList='',htmlTemp=$("textarea.js-order-tmp").val(); if(typeofresponse.result==='undefined'){ htmlList=$("textarea.js-no-order-tmp").val(); }else{ $.each(response.result,function(i,el){ htmlList+=htmlTemp.temp(el); }); } $('.js-status-'+status).empty().append(htmlList); returntrue; }else{ return$.alert(response.msg); } }, });
这里的部分方法没有给出,大家知道流程、原理即可。通过点击TAB标签,就可以显示数据了:
以上内容是小编给大家介绍的基于HTML模板和JSON数据的JavaScript交互(移动端),希望对大家有所帮助!