2019独角兽企业重金招聘Python工程师标准>>> 
提供俩种方式来显示用户列表
第一种采用beetl-ajax,进入该页面能立即看到第一页数据，下一页后异步加载html片段
第二种采用经典的json方式，进入该页面后，发起ajax请求，异步加载第一页数据。下一页后异步加载json数据再用JS转成html片段
代码在:http://git.oschina.net/xiandafu/beetlajax
性能测试感觉差不多，至于开发效率，我更喜欢beetl-ajax 这种模板引擎占主导方式（我不喜欢太多的js）
<html>
<head>
<script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script>
<script src="${ctxPath}/resource/js/time.js"></script>
<script>
$(document).ready(function(){
loadTable(1);
$(document).on('click','.page',function(){
var action = $(this).html();
var current = parseInt($("#current").html());
var page = current;
if(action=="next"){
page++;
}else{
page--;
}
loadTable(page);
});
});
function loadTable(page){
startTime();
$.post("beetlajax_data.html",{'page':page},function(result){
$("tbody").children().remove();
var array = eval('(' + result + ')');
for(var i=0;i<array.length;i++){
var item = array[i];
var tr = "<tr><td>"+item.id+"</td><td>"+item.name+"</td></tr>";
$(tr).appendTo("tbody");
//$("tbody").appendTo(tr);
}
endTime();
});
$('#current').html(page);
}
</script>
</head>
<body>
这是一个jsonajax测试页面,加载时间是: ${date(),'yyyy-MM-dd:hh:mm:ss'}
<p>
<div id="table-container" >
<table>
<thead><tr><td width=100>id</td><td width=100>姓名</td></tr></thead>
<tbody></tbody>
</table>
当前页面<span id="current">1</span><span style="width:20px"></span>
<a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a>
<br/>
耗时<span id="time" ></span>
</div>
</body>
</html>
<html>
<head>
<script src="${ctxPath}/resource/js/jquery-2.1.3.min.js"></script>
<script src="${ctxPath}/resource/js/time.js"></script>
<script>
$(document).ready(function(){
$(document).on('click','.page',function(){
var action = $(this).html();
var current = parseInt($("#current").html());
var page = current;
if(action=="next"){
page++;
}else{
page--;
}
//加载html,table-container的内容将从后台加载
startTime();
$("#table-container").load("beetlajax.html?ajaxCmd=userTable",{"page":page},function(){
endTime();
});
});
});
</script>
</head>
<body>
这是一个beetl-ajax测试页面,加载时间是: ${date(),'yyyy-MM-dd:hh:mm:ss'}
<p>
<div id="table-container" >
<%
#ajax userTable: {
%>
<table>
<tr><td width=100>id</td><td width=100>姓名</td></tr>
<%for(user in users){%>
<tr><td>${user.id}</td><td>${user.name}</td></tr>
<%}%>
</table>
当前页面<span id="current">${page!1}</span><span style="width:20px"></span>
<a href="#"><span class="page">next</span></a> <a href="#" ><span class="page">pre</span></a>
<%
}
%>
</div>
耗时<span id="time" ></span>
</body>
</html>
第三种 方式
后端直接生成好，前端更新 dom 节点
xtqd.js
$(function () {
var query = {
systemName:'',
sceneId:'',
departmentId: '',
netId: ''
}
$('#search').click(function (){
var systemName = $("#searchData").val().trim();
query.systemName=systemName;
search()
})
function search() {
var data=query;
$.ajax({
type: 'post',
url: "/daping/query ",
data:query,
dataType: 'json',
cache: false,
success: function (response) {
$(".floors-list .floor").empty();
$(".floors-list .floor").append(response.systemDetail);
// $(".jf-reply-list > li:last-child").before(ret.replyItem);
// alert("zwh");
},
error: function (res) {
console.log('数据加载失败，请检查网络是否通畅');
}
});
}
$('.scene .cate_detail_con .cate_detail_con_lk').click(function (){
$(this).addClass('active').siblings().removeClass('active');
query.sceneId = $(this).attr('data-id');
search()
})
$('.department .cate_detail_con .cate_detail_con_lk').click(function (){
$(this).addClass('active').siblings().removeClass('active');
query.departmentId = $(this).attr('data-id');
search()
})
$('.net .cate_detail_con .cate_detail_con_lk').click(function (){
$(this).addClass('active').siblings().removeClass('active');
query.netId = $(this).attr('data-id');
search()
})
})
xtqd.html
<!DOCTYPE html>
<html>
<head>
<meta name="robots" content="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="keywords" content="中国电科-智慧城市指挥中心"/>
<meta name="description" content="中国电科-智慧城市指挥中心"/>
<title>中国电科-智慧城市指挥中心-系统清单</title>
<link href="/assets/img/favicon.ico" rel="icon" type="image/x-icon" />
<link href="/assets/css/layout.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/reset.css" rel="stylesheet" type="text/css"/>
<link href="/assets/css/ftqzhcsxtqd.css" rel="stylesheet" type="text/css"/>
<!--让IE6、IE7、IE8、IE9支持html5和css3开始-->
<!--[if lt IE 9]>
<script src="/assets/js/html5.js" type="text/javascript" language="javascript"></script>
<script src="/assets/js/selectivizr.js" type="text/javascript" language="javascript"></script>
<script src="/assets/js/PIE.js" type="text/javascript" language="javascript"></script>
<![endif]-->
<!--让IE6、IE7、IE8、IE9支持html5和css3结束-->
<!--IE6支持png图片透明开始-->
<!--[if IE 6]>
<script src="/assets/js/DD_belatedPNG.js" mce_src="DD_belatedPNG.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix('a, div, ul, img, input, span');
</script>
<![endif]-->
<!--IE6支持png图片透明结束-->
<!--自定义js文件开始-->
<!--自定义js文件结束-->
<script type="text/javascript" src="/assets/jquery/jquery.min-v1.12.4.js"></script>
<script type="text/javascript" src="/assets/js/jfinal-com-v1.0.js?v=16"></script>
</head>
<body>
<!--页面开始-->
<div class="page page_a bg">
<!--头部开始-->
<div class="page_top bg">
<a class="title" target="" href="index.html" title="福田区智慧城市智慧中心"></a>
</div>
<!--头部结束-->
<!--系统清单开始-->
<div class="system-list-area">
<div class="condition-screen">
<div class="condition-screen-wrap bg">
<div class="condition-screen-title"><i class="icon icon-screen bg"></i>条件筛选</div>
<div class="search">
<a class="search-btn" href="javascript:void(0)" id="search" title="搜索">搜索</a>
<span class="search-value-bg bg"><i class="icon icon-search bg"></i><input id="searchData" name="" type="text" value="" /></span>
</div>
</div>
</div>
<div class="screen-area">
<ul class="cate-menu">
<li class="cate-menu-item scene">
<div class="cate-detail">
<dl class="cate_detail_item">
<dt class="cate_detail_tit">场景类型：</dt>
<dd class="cate_detail_con">
<a href="javascripte:void(0)" class="cate_detail_con_lk" flag="a1" title="全部">全部</a>
#for(s : sceneList)
<a href="javascripte:void(0)" data-id="#(s.value)" class="cate_detail_con_lk" flag="a1" title="#(s.name)">#(s.name)</a>
#end
</dd>
</dl>
</div>
</li>
<li class="cate-menu-item department">
<div class="cate-detail">
<dl class="cate_detail_item">
<dt class="cate_detail_tit">所属部门：</dt>
<dd class="cate_detail_con">
<a href="javascripte:void(0)" class="cate_detail_con_lk" flag="a3" title="全部">全部</a>
#for(s : departmentList)
<a href="javascripte:void(0)" data-id="#(s.id)" class="cate_detail_con_lk" flag="a3" title="#(s.name)">#(s.name)</a>
#end
</dd>
</dl>
</div>
</li>
<li class="cate-menu-item net">
<div class="cate-detail">
<dl class="cate_detail_item">
<dt class="cate_detail_tit">网络类型：</dt>
<dd class="cate_detail_con">
<a href="javascripte:void(0)" class="cate_detail_con_lk" flag="a4" title="全部">全部</a>
#for(s : dictList)
<a href="javascripte:void(0)" data-id="#(s.value)" class="cate_detail_con_lk" flag="a4" title="#(s.name)">#(s.name)</a>
#end
</dd>
</dl>
</div>
</li>
</ul>
</div>
<div class="floors-list">
<div class="floor">
<h3 class="floorhd">接入系统</h3>
<div class="cells flex">
#for(s : systemInList)
<div class="cell" title="#(s.name)">
<div class="cell__hd">#(s.name)</div>
<div class="cell__bd">
<div class="department">
<span>所属部门：</span>
<span>#(s.departmentname)</span>
</div>
<div class="platform">
<span>所属场景：</span>
<span>#(s.scene)</span>
</div>
</div>
<div class="cell__ft">
#for(net:s.nets)
<span class="service-livelihood">#(net.name)</span>
#end
</div>
</div>
#end
</div>
</div>
</div>
</div>
<!--系统清单结束-->
</div>
<!--页面结束-->
<script src="/assets/js/xtqd.js" type="text/javascript"></script>
</body>
</html>
DapingController
package com.jfinal.club.daping;
import java.util.List;
import com.jfinal.aop.Inject;
import com.jfinal.club._admin.systemin.SystemInService;
import com.jfinal.club.common.model.Department;
import com.jfinal.club.common.model.Dicts;
import com.jfinal.club.common.model.SystemIn;
import com.jfinal.club.department.DepartmentService;
import com.jfinal.core.Controller;
import com.jfinal.kit.Ret;
public class DapingController extends Controller {
@Inject
SystemInService srv;
@Inject
DepartmentService departmentService;
/**
* 显示大屏界面
*/
public void index() {
render("index.html");
}
/**
* 显示系统清单
*/
public void xtqd() {
//场景类型
List<Dicts> sceneList=srv.getCommonDictList("value, name","systemin","scene");
setAttr("sceneList", sceneList);
//所属部门
List<Department> departmentList=departmentService.getDepartmentList();
setAttr("departmentList", departmentList);
//网络类型
List<Dicts> dictList=srv.getCommonDictList("value, name","systemin","net");
setAttr("dictList", dictList);
String systemName = getPara("systemName");
String sceneId = getPara("sceneId");
String departmentId = getPara("departmentId");
String netId = getPara("netId");
List<SystemIn> getSystemInList=srv.getSystemInList(systemName,sceneId,departmentId,netId);
setAttr("systemInList", getSystemInList);
render("xtqd.html");
}
/**
* 显示系统清单
*/
public void query() {
String systemName = getPara("systemName");
String sceneId = getPara("sceneId");
String departmentId = getPara("departmentId");
String netId = getPara("netId");
List<SystemIn> getSystemInList=srv.getSystemInList(systemName,sceneId,departmentId,netId);
Ret ret= Ret.ok("systemInList", getSystemInList);
// 用模板引擎生成 HTML 片段 systemDetail
String systemDetail = renderToString("systemDetail.html", ret);
ret.set("systemDetail", systemDetail);
renderJson(ret);
}
}
systemDetail.html
<h3 class="floorhd">接入系统</h3>
<div class="cells flex">
#for(s : systemInList)
<div class="cell" title="#(s.name)">
<div class="cell__hd">#(s.name)</div>
<div class="cell__bd">
<div class="department">
<span>所属部门：</span>
<span>#(s.departmentname)</span>
</div>
<div class="platform">
<span>所属场景：</span>
<span>#(s.scene)</span>
</div>
</div>
<div class="cell__ft">
#for(net:s.nets)
<span class="service-livelihood">#(net.name)</span>
#end
</div>
</div>
#end
</div>
参考官方文档
http://ibeetl.com/guide/#beetl
- 4.12. 整合ajax的局部渲染技术