干了一段时间，是时候总结一下了，主要总结下前台用到的技术。areaInfo.js数据定义如下：{
"AreaList": [
{
"Name": "北京",
"Num": 123
},
{
"Name": "Nework",
"Num": 124
}
]
}--------------------- 前台简单的代码如下，主要用到template.js 和jquery.js, test1.js：
<head>
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/view/test1.js"></script>
</head>
<body>
<table>
<thead><tr><th>Name</th><th>Num</th></tr></thead>
<tbody id="tb-List"></tbody>
</table>
<hr/>
<br/>
<script id="areaLst-tpl" type="text/html">
<%for(i = 0; i<AreaList.length; i++){ %>
<tr>
<td><%==AreaList[i].Name %></td>
<td><%==AreaList[i].Num %></td>
</tr>
<%} %>
</script>
</body>
------test1.js -----
$(document).ready(function() {
$.ajax({
url: "js/data/areaInfo.js",
//data: { ‘Inputs‘: data },
dataType: "json",
type: "GET",
async: false,
success: function (json) {
if (json.AreaList != null && json.AreaList.length > 0) {
var items = template(‘areaLst-tpl‘, json);
$(‘#tb-List‘).empty();
$(‘#tb-List‘).html(items);
}
else {
alert("no data");
}
},
error: function (error) {
console.log(error);
}
});
});
逻辑很简单，Ajax请求定义的json数据，然后调用template代码，格式化数据显示形成数据列表，类似 jsp用起来很方便。
时间： 2024-10-16 01:28:37