html php交互json 结果集,基于HTML模板和JSON数据的JavaScript交互(移动端)
写本文之前,我正在做一个基于Tab页的订单中心:
每点击一个TAB标签,会请求对应状态的订单列表。之前的项目,我会在js里使用 + 连接符连接多个html内容:
var html = '';
html += '
'
'
'+
'
';
Html内容少点还好,但是当内容多起来的时候,再使用这种方式,以后维护起来不方便,也影响美观,可阅读性差。
突然想起来PHP模板的相关知识,那么应该也有类似JavaScript模板一说。由于为了快速使用在项目上,就去网上找了找。还真有:
基于HTML模板和JSON数据的JavaScript交互
看了下文章,使用起来还是蛮简单的:
1、准备好html模板
订单号:$order_num$
收件人:$cus_name$
$create_time$
$flag_name$
其中变量部分全部用 variate variate 表示。
2、模板方法很简单,直接写一个基于字符串原型的扩展方法,确保全局可用:
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = 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') {
var htmlList = '', htmlTemp = $("textarea.js-order-tmp").val();
if(typeof response.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);
return true;
} else {
return $.alert(response.msg);
}
},
});
这里的部分方法没有给出,大家知道流程、原理即可。通过点击TAB标签,就可以显示数据了:
以上内容是小编给大家介绍的基于HTML模板和JSON数据的JavaScript交互(移动端),希望对大家有所帮助!
html php交互json 结果集,基于HTML模板和JSON数据的JavaScript交互(移动端)相关推荐
- 基于C++模板类编程数据结构图的操作---注意error:2248的解析
由于其中采用了友元类的方式来进行图对数据结构的操作,但是编译不通过,报错error:2248----大概意思就是无法访问到类中的私有成员:进过查询找到了原因,自己虽然遵循了先声明类,再声明友元的顺序, ...
- androidclient和站点数据交互的实现(基于Http协议获取数据方法)
androidclient一般不直接訪问站点数据库,而是像浏览器一样发送get或者post请求.然后站点返回client能理解的数据格式,client解析这些数据.显示在界面上.经常使用的数据格式是x ...
- 基于WMS/WCS与PLC数据交互的立体仓库控制系统案例分析
写在面前 上次分享了文章: TIA Portal实现动态加密的高阶玩法-分级催款密钥授权管理 然后很快就有朋友根据里面的思路实现了,很赞,不过提醒大家的是,我们分享的只是一些思路,不是让大家跟做某件事 ...
- Raft 集群成员变更、日志压缩、客户端交互
Raft 集群成员变更.日志压缩.客户端交互 集群成员变更 在集群服务器发生变化时,不能一次性的把所有的服务器配置信息从老的替换为新的,因为,每台服务器的替换进度是不一样的,可能会导致出现双主的情况, ...
- c语言json映射,GitHub - xujun621/cson: 基于C语言的json数据映射解析库
CSON 基于cJSON,运行于C语言平台的json-struct模型解析工具 简介 CSON是一个简单的cJSON的二次封装,相比于使用原生cJSON一层一层解析的方式,CSON采用模型映射的方式, ...
- Java—基于Fastjson的JSON串序列化和反序列化模板总结
关注微信公众号:CodingTechWork,一起学习进步. 介绍 模板需求说明 开发中经常遇到前端传递过来的JSON串的转换,后端需要解析成对象,有解析成List的,也有解析成Map的. 我 ...
- 基于json-lib.jar包Json实例程序
基于json-lib.jar包Json实例程序 1.JSONObject to DynaBean String json = "{name=\"json\",bool:t ...
- python生成json接口_基于python的Flask框架写json接口并且结合eolinker进行接口测试
一.前言 很多时候为了提高软件开发的效率,后端程序人员理想状态下应该编写程序测试接口供前端程序人员进行测试,以便前端的开发.笔者由于项目的需求近期尝试学习了一下测试接口的编写,以Python+Flas ...
- vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿 关注我们,一起学习进步 基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
- Python交互绘制Julia集
matplotlib提供了交互操作的功能,比如,只要绑定button_press_event,就可以在点击图像时,触发相应的事件. import matplotlib.pyplot as plt im ...
最新文章
- C# 获取 IE 临时文件
- 线下生意再次“受宠”:大数据给你添点料
- C#学习笔记-XML的读写(一)
- cmd打开java文件夹_Java用CMD打开指定文件和文件夹
- c++日志文件中文显示乱码的问题及解决办法
- 数据分析基于朴素贝叶斯的书籍评价信息分类
- linux之修改dns以及用netmask修改ip和网关
- css td 溢出改为省略号
- 一周之内连过5人,HCIE-RS新版实验这么好考?
- 安卓编程 Sqlite的入门编程
- 信息系统项目管理师自学笔记(二十二)—— 网络应用与管理
- Matlab用saveas函数自动编号保存图片
- android 打开网络设置 异常,逍遥安卓模拟器显示网络异常,请查收最完整的解决方法...
- jquery插件库地址
- 少儿编程Scratch学习教程--Scratch3.0界面简介
- 软考:净现值NPV、回收期、收益率计算方法
- 一文简单理解《Effective Java》建议
- JavaSE:抽象类和接口
- 9宫格解锁 android_Android实现九宫格解锁
- 联想集团2017财年营收430.35亿美元 净利润5.35亿美元
热门文章
- (转)当你惊讶于才的胜利 它早已“入侵”投资界
- 重点项目却总是腐化,程序员为什么会写烂代码?
- 传承开源-耿航2018中国开源云超级人物获奖感言
- 【车间调度】基于matlab遗传算法求解柔性车间调度问题【含Matlab源码 660期】
- 如何识别媒体偏见_面部识别软件:宝贵资产,还是社会偏见的体现?
- 波普尔心智格列高利心智_心智与人工智能理论
- android mdpi对应哪一个屏幕,Android屏幕大小为ldpi,mdpi,hdpi,xhdpi显示? - 例如:ldpi为1024X768像素...
- mysql 外键 150_mysql之创建外键报150错误的处理方法
- laydate 在vue中使用_Vue中使用ArcGIS JS API 4.14开发
- Java自动生成增量补丁自动部署_Shell脚本结合Git实现增量项目部署