jsp頁面代碼
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JQM動態加載 collapsible實例</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/mweb/sc/css/jquery.mobile-1.2.0.css" />
<script src="<%=request.getContextPath()%>/mweb/sc/js/jquery.js"></script>
<script src="<%=request.getContextPath()%>/mweb/sc/js/jquery.mobile-1.2.0.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
var initial = <%=request.getParameter("action")%>;
//首次加載頁面
if(initial =="0"){
var url ="<%=request.getContextPath()%>/M3_jobMobileServlet.back?method=RA&action=initial"; //一個servlet類，取list
selectList(url);
}
});
function selectList(url){
$.getJSON(url,function(data) {
var groupList = data.list;
li_array = [];
var temp="";
for(var i in groupList){
li_array.push(tplNew(groupList[i]));
}
var listview = $('#invition').find('#invitiondetail');
listview.html(li_array.join(''));
listview.trigger("create"); // 刷新div的 注意，這個地方和Listview 有點不同，listview是強制刷新，這個是創建一個div節點
});
}
function tplNew(newItem){
return '<div data-role="collapsible" data-collapsed="true"><h2>'+newItem.job_name+' </h2>'+ newItem.job_content+' </div>'
}
</script>
<body>
<div data-role="page" id="invition">
<div data-role="header" data-theme="e">
<a href="#introdution" data-rel="back" data-role="button" data-icon="arrow-l">返回</a>
<h1>人才招聘</h1>
</div>
<div data-role="content">
<div id ="invitiondetail">
<div data-role="collapsible">
</div>
</div>
</div>
</div>
</body>
</html>java 代碼
後臺的代碼就是獲取一個list 轉換成json 輸出
//獲取招聘信息list
List list = jobInterface.queryJobMobileByCondition(pu);
String result ="";
Map<String, List> mapUtils = new HashMap<String, List>();
//轉換成JSON 輸出
if (list.size()>0) {
mapUtils.put("list",list);
JSONObject object = JSONObject.fromObject(mapUtils);
result = object.toString();
}
response.setContentType("application/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(result);
pw.flush();
pw.close();