前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >jQuery 和 json 简单例子(注意callback函数的处理!!) (servlet返回json,jquery更新,java json)

jQuery 和 json 简单例子(注意callback函数的处理!!) (servlet返回json,jquery更新,java json)

作者头像
用户1258909
发布2018-07-03 11:52:56
发布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:

代码语言:javascript
代码运行次数:0
运行
复制
    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数据:

代码语言:javascript
代码运行次数:0
运行
复制
[
{"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:

代码语言:javascript
代码运行次数:0
运行
复制
<!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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档