jQuery 和 json 简单例子（注意callback函数的处理！！）（servlet返回json，jquery更新，java json）

用户1258909

发布于 2018-07-03 11:52:56

83600

代码可运行

文章被收录于专栏：拂晓风起拂晓风起

运行总次数：0

代码可运行

这个例子是后台获取某个目录的所有文件信息，前台网页显示。

代码文件： 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();
        }
    }

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2011-03-25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery