这个例子是后台获取某个目录的所有文件信息,前台网页显示。
代码文件: http://files.cnblogs.com/kenkofox/jsonTest.html%E5%92%8COnlineFileManagerServlet.rar
JSON包(java文件):http://files.cnblogs.com/kenkofox/org.json.rar
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();
}
}
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 " }
]
{ " 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 >
< 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 >