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

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

代码文件:     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> 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

listview优化(中)

1,对Imageview使用setTag()方法来解决图片错位问题,这个Tag中设置的是图片的url,然后在加载的时候取得这个url和要加载那position...

19710
来自专栏数据之美

Hive 中的复合数据结构简介以及一些函数的用法说明

目前 hive 支持的复合数据类型有以下几种: map (key1, value1, key2, value2, ...) Creates a map wit...

3615
来自专栏小巫技术博客

Retrofit2 &amp; RxJava2实现单文件和多文件上传

1894
来自专栏后端之路

基于SpringBoot的CodeGenerator

背景 目前组织上对于一个基础的crud的框架需求较多 因此选择了SpringBoot作为基础选型。 Spring Boot是由Pivotal团队提供的全新框架,...

1K10
来自专栏Ryan Miao

Spring-AOP实践 - 统计访问时间

公司的项目有的页面超级慢,20s以上,不知道用户会不会疯掉,于是老大说这个页面要性能优化。于是,首先就要搞清楚究竟是哪一步耗时太多。 我采用spring aop...

3778
来自专栏向治洪

大量图片优化

最近在练习中用GridView加入相册中图片发现加入大量的相片之后,GirdView会变得很卡,想到或许可以用异步加载的方式来解决,但是能力有限,想得到却无法...

1845
来自专栏進无尽的文章

多线程-NSOperation和NSOperationQueue

NSOperation类是用来封装在单个任务相关的代码和数据的抽象类。NSOperation 是苹果公司对 GCD 的封装,完全面向对象,所以使用起来更好理解。...

973
来自专栏Java成神之路

Java企业微信开发_04_消息推送之发送消息(主动)

(1)流程不同:发送消息是第三方服务器主动通知微信服务器向用户发消息。而被动回复消息是 用户发送消息之后,微信服务器将消息传递给 第三方服务器,第三方服务器接收...

1465
来自专栏何俊林

异步处理老司机:IntentService 源码分析

IntentService 是一种特殊的 Service,它继承了 Service 并且它是一个抽象类,因此必须创建它的子类才能够使用 IntentServic...

1032
来自专栏Android干货园

Retrofit+OKHttp 教你怎么持久化管理Cookie

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/51...

742

扫码关注云+社区