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 条评论
登录 后参与评论

相关文章

来自专栏函数式编程语言及工具

Akka(8): 分布式运算:Remoting-远程查找式

  Akka是一种消息驱动运算模式,它实现跨JVM程序运算的方式是通过能跨JVM的消息系统来调动分布在不同JVM上ActorSystem中的Actor进行运算,...

4369
来自专栏陈满iOS

iOS框架·Masonry源码深度解析及学习启示:设计模式与链式编程思想

可见,系统传统的代码布局有点繁琐。为了简化上述传统布局代码,被广泛应用的第三方框架 Masonry 对AutoLayout 进行了封装,Swift版则是 Sna...

982
来自专栏码匠的流水账

聊聊resilience4j的bulkhead

resilience4j-bulkhead-0.13.0-sources.jar!/io/github/resilience4j/bulkhead/Bulkhe...

2051
来自专栏大内老A

ASP.NET MVC的Model元数据与Model模板:将”ListControl”引入ASP.NET MVC

我们不仅可以创建相应的模板来根据Model元数据控制种类型的数据在UI界面上的呈现方法,还可以通过一些扩展来控制Model元数据本身。在某些情况下通过这两者的结...

3716
来自专栏用户画像

jQuery validate

751
来自专栏菩提树下的杨过

base64编码在silverlight中的使用

在传统的.net应用中,使用base64编码字符串是一件很轻松的事情,比如下面这段代码演示了如何将本地文件转化为base64字符串,并且将base64字符串又还...

2307
来自专栏Java成神之路

Java企业微信开发_02_通讯录同步

       登录企业微信—>管理工具—>通讯录同步助手—>开启“API接口同步”  ; 开启后,即可看到通讯录密钥,也可设置通讯录API的权限:读取或者编辑通...

8942
来自专栏码匠的流水账

java10下编译lombok注解的代码

本文主要研究下在带有lombok(1.16.20版本)注解的代码在java10下的编译问题。

2130
来自专栏码匠的流水账

聊聊storm的CheckpointSpout

storm-2.0.0/storm-client/src/jvm/org/apache/storm/topology/TopologyBuilder.java

2666
来自专栏拂晓风起

cocos2d-js Shader系列4:Shader、GLProgram在jsb(native、手机)和html5之间的兼容问题。cocos2d-js框架各种坑。

2124

扫码关注云+社区

领取腾讯云代金券