您的位置：首页 > Web前端 > JQuery

jQuery 和 json 简单例子

2012-06-14 16:28 369 查看

Servlet：

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
String dir = getServletContext().getRealPath("/") + "test";
File[] files = new File(dir).listFiles();

//创建json数据
JSONObject json = new JSONObject();
JSONArray jsonFiles = new JSONArray();
for (File file : files) {
try {
JSONObject jsonFile = new JSONObject();
jsonFile.put("fileName",file.getName());
jsonFile.put("fileSize", Double.toString(getFileSize(file)) + "kb");
jsonFile.put("uploadTime", new SimpleDateFormat("yyyy年MM月dd日 hh:mm:ss").format(new Date(file.lastModified())));
jsonFiles.put(jsonFile);
} catch (Exception ex) {
Logger.getLogger(OnlineFileManagerServlet.class.getName()).log(Level.SEVERE, null, ex);
}
}
System.out.println(jsonFiles.toString());

try {
out.write(jsonFiles.toString());
} finally {
out.close();
}
}

JSON数据：

[
{"fileSize":"59.42kb","fileName":"commons-logging-1.1.1.jar","uploadTime":"2007年11月22日 12:28:16"},
{"fileSize":"58.19kb","fileName":"commons-fileupload-1.2.2.jar","uploadTime":"2010年07月14日 11:43:04"},
{"fileSize":"9.74kb","fileName":"中文.png","uploadTime":"2011年03月24日 01:28:38"},
{"fileSize":"10.57kb","fileName":"loader.gif","uploadTime":"2011年03月24日 01:59:52"}
]

Html：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="./js/jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON('json.txt',function(data){
//遍历JSON中的每个entry
　　　　　　　　　　　　//因为是用JSONArray返回的串，格式是{{"abc":123},{"abc":456}}，所以要用each
　　　　　　　　　　　　//如果用JSONObject返回的串，格式为{"abc":123}就不要用each这一层了，直接data['abc']
$.each(data,function(entryIndex,entry){
var html='<tr>';
html+='<td>'+entry['fileName']+'</td>';
html+='<td>'+entry['fileSize']+'</td>';
html+='<td>'+entry['uploadTime']+'</td>';
html+='</tr>';
$('#title').after(html);
});
});
$("#button1").click(function(){
refresh('OnlineFileManagerServlet');});
});
/**
* 获取新的文件列表
* url表示该文件夹的路径
*/
function refresh(url) {
$.getJSON(url,function(data){
$('#title').nextAll().remove();
//遍历JSON中的每个entry
$.each(data,function(entryIndex,entry){
//no files
if(typeof(entry['fileName']) == "undefined"){
$("#fileListDiv").css("display","none");
$("#noFileMessageDiv").css("display","block");
return;
}
var html='<tr>';
html+='<td>'+entry['fileName']+'</td>';
html+='<td>'+entry['fileSize']+'</td>';
html+='<td>'+entry['uploadTime']+'</td>';
html+='</tr>';
$('#title').after(html);
});
}
);
}
</script>
<style>
#noFileMessageDiv{
display : none ;
}
</style>
</head>
<body>
<div>
<div id="fileListDiv">
<table>
<tr id="title">
<th>文件名</th>
<th>文件大小(kb)</th>
<th>上传时间</th>
</tr>
</table>
</div>
<div id="noFileMessageDiv">
文件夹为空
</div>

</div>
<button id="button1">refresh</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航