jsp 代碼
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>動態加載listview 實例</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">
// 動態加載 listview
$(document).ready(function() {
var url ="<%=request.getContextPath()%>/M3_news_miniMobileServlet.back?method=RA";//這是一個servlet 類，取一個list，就是下面的java代碼
$.getJSON(url,function(data) {
var groupList = data.list;
li_array = ['<li data-role="list-divider" >新聞動態 <span class="ui-li-count"><a href="<%=request.getContextPath()%>/mweb/sc/news.jsp?action=0" data-ajax="false" data-role="button" data-icon="arrow-r">更多</a></span> </li>'];
var temp="";
for(var i in groupList){
li_array.push(tplNew(groupList[i]));
}
var $listview = $('#newsmini');
$listview.html(li_array.join(''));
$listview.listview('refresh');
});
});
function tplNew(newItem){
return '<li data-icon="false"><a href="#"><img src="'+newItem.news_mini_image +'"/><h3>' + newItem.news_mini_content+'</h3></a></li>';
}
</script>
<body>
<div data-role="page" class="maindiv" id="index" >
<div data-role="content" style="margin-top:10px;padding-top:15px;">
<ul data-role="listview" id ="newsmini" data-divider-theme="e"></ul>
</div>
<div data-role="footer" class="footer-desc" data-theme="e" d>
</div>
</div>
</body>
</html>
java 代碼
List list = newsInterface.queryBytime();
String result ="";
Map<String, List> mapUtils = new HashMap<String, List>();
if (list.size()>0) {
System.err.println(list.size());
mapUtils.put("list",list);
JSONObject object = JSONObject.fromObject(mapUtils);//把list 轉換成json格式 輸出
result = object.toString();
}
response.setContentType("application/xml;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(result);
pw.flush();
pw.close();