jQuery 和 json 简单例子

来源：互联网发布：航天金税开票软件编辑：程序博客网时间：2024/05/17 22:38

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>