maustach.js

本文介绍了一种结合Mustache.js模板引擎与jQuery AJAX技术来动态加载和渲染网页内容的方法。通过具体实例展示了如何从服务器获取JSON数据,并利用Mustache模板将其格式化后插入到指定DOM元素中,实现了用户界面的个性化展示。
摘要由CSDN通过智能技术生成

页面处理,可将html代码直接写入script区域,然后将值直接赋到html代码中


如下:

js:

function getAccount() {
jQuery_1_7_2.ajax({
url : contextPath + '/tops/findUser.jsonp',
dataType : 'jsonp',
data : dataKeys,
async : false,
cache : false,
success : function(data) {
var template = jQuery_1_7_2('#render_setting').html();
var html = Mustache.render(template, data);
jQuery_1_7_2('#userSet .dropdown').append(html);
},
error : function(e) {
}
});
}


script:

<script type="text/html" id="render_setting">
<div class="dropdown-layout">
<div class="topInfo">
<img src="{{^result.userPic}}$imageContextPath/images/head/default_user.png{{/result.userPic}}{{#result.userPic}}{{result.userPic}}{{/result.userPic}}" width="35" height="35" alt="">
<span class="mg-l10" title="{{^result.userName}}$!tRegUserComplex.tregUser.loginName{{/result.userName}}{{#result.userName}}{{result.userName}}{{/result.userName}}">{{^result.userName}}$!tRegUserComplex.tregUser.loginName{{/result.userName}}{{#result.userName}}{{result.userName}}{{/result.userName}}</span>
</div>
<p><a href="javascript:personalData();" title="个人资料">个人资料</a></p>
<p><a href="javascript:companyData();" title="企业资料">企业资料</a></p>
<p><a href="javascript:tradeCenter();" title="交易中心">交易中心</a></p>
<p><a href="javascript:pwdData();" title="密码修改">密码修改</a></p>
<p class="logout"><a href="javascript:logoutData();" title="退出">退出</a></p>
</div>
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值