JS使用模板快速填充HTML控件数据 - Freshflower - ITeye技术网站
博客分类：
在开发WEB前端页面时，经常会根据动态的数据加载一些HTML控件，如果把这些HTML代码全写入JS中，根据不同的数据显示的控件也不一样，操作起来会显得比较繁琐，而且极不利于代码的维护，怎么办呢？现在就是我要说的，使用模板方法，直接把数据往里面套就好了。废话不多说，以示例来说明。
先写个非常重要的JS方法，此方法就是用来填充格式数据的。(看不懂也没关系，会用就行)
function formatTemplate(dta, tmpl) {
var format = {
name: function(x) {
return tmpl.replace(/{(\w+)}/g, function(m1, m2) {
return "";
return (format && format[m2]) ? format[m2](dta[m2]) : dta[m2];
接下来就用示例来说明：
例如：从服务器取出一个JSON串，把数据显示在一组HTML控件上，现在我先把HTML代码写下来:
&script type="text/template"&
&tr mgid="{mgid}" mid="{mid}"&
&input type="checkbox" mid="{mid}"&&/td&
&a href="{localfile}" data-fancybox-group="button" class="fancybox-buttons"&
&img src="{localfile}" style="width:45height:45"&&/a&
&input type="text" class="input-large valid" value="{medianame}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" name="medianame" mid="{mid}" readonly="readonly"&&/td&
&a onclick="updateMediaName(this)" href="javascript:void(0);"&重命名&/a&
&a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);"&替换&/a&
&a onclick="daleteMedia(this)" href="javascript:void(0);"&删除&/a&
&a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);"&设置封面&/a&
大家看到了这段代码，如果全部写JS上确实比较烦，而且大家也发现了，为什么在首尾有&script&标签，里面有{}括号括住了一些值，为什么这么写呢，别急别急。其实这些{}号中的数据，就是我们要填充的数据的地方。括号中的名称就是存贮值的变量，好，要怎么填呢？
若我们从服务器上取到的JSON如下:
"total": "1",
"page": "1",
"records": "3",
"rows": [{
"groupname": "美食图片",
"mid": 4766,
"sid": 517,
"medianame": "Tulips",
"mgid": 549,
"mediatype": "image",
"mediaid": "",
"timestamp": "",
"localfile": "/UploadFile/image//0x6dvf.jpg",
"picurl": "",
"thumbid": "",
"voiceformat": "",
"state": 1,
"createtime": "\/Date(0+0800)\/",
"uploadtime": "\/Date(0+0800)\/",
"width": 480,
"height": 360,
"seizespace": 17.41
"groupname": "美食图片",
"mid": 4765,
"sid": 517,
"medianame": "Penguins",
"mgid": 549,
"mediatype": "image",
"mediaid": "",
"timestamp": "",
"localfile": "/UploadFile/image//6iluw6.jpg",
"picurl": "",
"thumbid": "",
"voiceformat": "",
"state": 1,
"createtime": "\/Date(0+0800)\/",
"uploadtime": "\/Date(0+0800)\/",
"width": 480,
"height": 360,
"seizespace": 15.62
"groupname": "美食图片",
"mid": 4764,
"sid": 517,
"medianame": "Lighthouse",
"mgid": 549,
"mediatype": "image",
"mediaid": "",
"timestamp": "",
"localfile": "/UploadFile/image//fx0kzp.jpg",
"picurl": "",
"thumbid": "",
"voiceformat": "",
"state": 1,
"createtime": "\/Date(0+0800)\/",
"uploadtime": "\/Date(0+0800)\/",
"width": 480,
"height": 360,
"seizespace": 14.2
我们要填写到地方定义在下面Table中
&table id="tableData"&
&tr class="firstLine"&
&th&图片&/th&
&th&图片名称&/th&
&th&类型&/th&
&th&大小&/th&
&th&尺寸&/th&
&th&上传日期&/th&
&th&操作&/th&
好了准备工作做好了，重点的来了，别看走眼了:
url: '/manage/GetAllMediaListPage',
type: 'get',
data: data,
cache: false,
dataType: "json",
success: function(dta) {
if (!dta || !dta.rows || dta.rows.length &= 0) {
//获取模板上的HTML
var html = $('script[type="text/template"]').html();
//定义一个数组，用来接收格式化合的数据
var arr = [];
//对数据进行遍历
$.each(dta.rows, function(i, o) {
//这里取到o就是上面rows数组中的值, formatTemplate是最开始定义的方法.
arr.push(formatTemplate(o, html));
//好了，最后把数组化成字符串，并添加到table中去。
$('#tableData').append(arr.join(''));
//走完这一步其实就完成了，不会吧，这么简单，不错，就是这么简单!! 不信就自己动手去试试!
哟嚯，搞定，等等，好像表格的列数对不上，是吧，那是因为我没有把模板写完整出来，继续往下看。
现在我来解释为什么把模板代码放在&script&&/script&中间，假如，你把模板代码放在某个&div&中并隐藏起来，那么可能你的代码中会用到$('input[type="text"]')查找控件时，不好意思，就会把模板中的也统计进去了，这个并不是你想要的。所以我用&script&，这么做还有一个好处，就是不会被当成HTML来执行显示出来， 但我们也得保证不能当成js来执行，所以加了个type="text/template"，没有这个类型的，自己明白就好了。
另外，像o.mid的数值只会填充到{mid}这个里，不会填充到别的地方去，而且{mid}可以存在多个，一并全部替换成实际数值了。
接下来的一个问题就是，我取到的数据可能并不是我要给用户显示的，那么就需要变通一下了
var html = $('script[type="text/template"]').html();
var arr = [];
$.each(dta.rows, function(i, o) {
//atime,asize和fsize这三个变量是之前的JSON中没有的，可灵活设置一下:
//格式化时间,当然getFormatDate这个函数我也公布出来了，格式化时间而已，见最后面。
o.atime = getFormatDate(o.uploadtime ? o.uploadtime : o.createtime, 'yyyy-MM-dd');
//图片的尺寸大小: 就是把上面的o.width和o.height变量组合一下，如果任何一个不存在，则返回"-"
o.asize = (o.width && o.height) ? o.width + ' * ' + o.height : '-';
//图片大小。存在才显示xxKB
o.fsize = o.seizespace ? o.seizespace + '& KB' : '-';
//格式化模板数据
arr.push(formatTemplate(o, html));
$('#tableData').append(arr.join(''));
完整的HTML模板如下:
&script type="text/template"&
&tr mgid="{mgid}" mid="{mid}"&
&input type="checkbox" mid="{mid}"&&/td&
&a href="{localfile}" data-fancybox-group="button" class="fancybox-buttons"&
&img src="{localfile}" style="width:45height:45"&&/a&
&input type="text" class="input-large valid" value="{medianame}" onblur="TextOnBlur(this)" onclick="TextOnFocus(this)" name="medianame" mid="{mid}" readonly="readonly"&&/td&
&td&{mediatype}&/td&
&!-- 各位看官，自定义的三个属性在这里哦~~ --&
&td&{fsize}&/td&
&td&{asize}&/td&
&td&{atime}&/td&
&a onclick="updateMediaName(this)" href="javascript:void(0);"&重命名&/a&
&a onclick="showbulkUploadTemplate(this)" name="edit" localfile="{localfile}" href="javascript:void(0);"&替换&/a&
&a onclick="daleteMedia(this)" href="javascript:void(0);"&删除&/a&
&a onclick="setMediaFaceImage(this);" title="设置为分组【{groupname}】的封面" groupname="{groupname}" mid="{mid}" href="javascript:void(0);"&设置封面&/a&
其实想通了还是挺简单的，当然formatTemplate函数中的第一个参数必须要求是像struct的对象，直接一点就是这样一个数据包:
{ "A": “a”, "B": "b", "C":"c"
。懂了吧伙计们，不懂就慢慢看吧，嘿嘿！
附: 格式化时间函数:
function getFormatDate(xdate, format) {
var format = format || 'yyyy-MM-dd HH:mm:ss';
var date = (xdate instanceof Date) ? xdate : new Date(parseInt(xdate.replace('/Date(', '').replace(')/', ''), 10));
var lang = {
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
for (var key in lang) {
if (new RegExp('(' + key + ')').test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
lang[key] : ('00' + lang[key]).substr(('' + lang[key]).length));
} catch (e) {
return '-';
浏览 20971
freshflower
浏览: 85393 次
来自: 杭州
能不能选择时间啊
if (!e.ConnectSocket.ReceiveAsy ...
我想知道maxDate显示当前系统日期怎么表示？
zzzili 写道楼主您的这个数据文件是多少精度的啊？我在网上 ...
楼主您的这个数据文件是多少精度的啊？我在网上找的一个网站的服务 ...JS远程获取网页源代码实例
字体：[ ] 类型：转载 时间：
获取网页源代码的方法有很多，本文为大家介绍下使用JS是如何做到的，感兴趣的朋友可以学习下哦
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& &html& &head& &meta http-equiv="Content-type" content="text/ charset=utf-8"& &title&远程网页源代码读取&/title& &style type="text/css"& /* 页面字体样式 */ body, td, input, textarea { font-family:A font-size:12 } &/style& &script type="text/javascript"& //用于创建XMLHttpRequest对象 function createXmlHttp() { //根据window.XMLHttpRequest对象是否存在使用不同的创建方式 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式 } else { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式 } } //直接通过XMLHttpRequest对象获取远程网页源代码 function getSource() { var url = document.getElementById("url"). //获取目标地址信息 //地址为空时提示用户输入 if (url == "") { alert("请输入网页地址。");
} document.getElementById("source").value = "正在加载……"; //提示正在加载 createXmlHttp(); //创建XMLHttpRequest对象 xmlHttp.onreadystatechange = writeS //设置回调函数 xmlHttp.open("GET", url, true); xmlHttp.send(null); } //将远程网页源代码写入页面文字区域 function writeSource() { if (xmlHttp.readyState == 4) { document.getElementById("source").value = xmlHttp.responseT } } &/script& &/head& &body& &h1&远程网页源代码读取&/h1& &div& 地址：&input type="text" id="url"& &input type="button" onclick="getSource()" value="获取源码"& &/div& &textarea rows="10" cols="80" id="source"&&/textarea& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想写一个爬虫,但是需要抓去的的数据是js生成的,在源代码里看不到,要怎么才能抓到呢? 最好是用python
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果对抓取的性能没有什么要求的话, 尝试一下selenium或者watir吧.
web自动化测试脚本用好了可以做很多事情.
利用你的浏览器执行好js, 然后再从dom里面取数据.另外一个情况, 如果你知道js是通过ajax或者api取数据的, 直接去抓数据源, 得到的不是json就是xml, 然后处理数据吧
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
基于webkit的，写js就行。
用python调它，用起来很爽。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
对于JS生成的数据，你是没有办法获取的。除非直接遍历dom还是有可能……一种办法是可以考虑用userscript，获取数据然后post到服务器等就随你自己的喜欢了还有一种办法（假设是在win32），可以使用com组件调用IE然后获取动态生成的dom树，然后再做处理当年试过改firefox的程序来做这个，不过也很麻烦当然，你也可以用python什么自己实现一套浏览器和js引擎，那么这些数据肯定是你自己的了，不过还不如直接改或者用com组件但是你说的爬虫爬取js生成的，那是没有办法的：（不管怎么样，一定要实现dom树，要让js能执行，那么就相当于你要实现一套简单的浏览器了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以试着用
获得 JS 执行后的 dom。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
目前认为比较好的一个方案是采用python+gtk+pywebkit，相当于基于webkit自己写一个定制的浏览器，这样可以在网页中插入自己的js，遍历dom等都是非常容易的。这个组合在ubuntu下还是非常容易搭建的。
sudo apt-get install python-gtk python-webkit，即可。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
扫扫下载 App我抓取网页获取一段js代码，如何在nodejs中执行它呢 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
例如：我采集网页抓取到的js代码
Hub.config.set(‘init’,{
pipeHost: ‘’,
如果可以直接执行的话就好了，可以很方便拿到内容。不知道有没有办法，求教。
把抓到的代码用fs写一下，在require();是可以执行的。应该有更简单的办法。
直接在node里执行的话，可以用node的vm模块，这个模块提供了一个沙箱来运行代码，有种浏览器环境下eval( )函数的感觉，不过在沙箱里所以更安全 。
比如可以用：vm.runInNewContext( code );
谢谢大神们的回复，马上研究。
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的