jQuery 和 json 简单例子

最新推荐文章于 2023-11-11 07:22:07 发布

睿子

最新推荐文章于 2023-11-11 07:22:07 发布

阅读量528

点赞数

分类专栏： Java 文章标签： json jquery html function file button

本文链接：https://blog.csdn.net/ge_zhiqiang/article/details/7663596

版权

Java 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

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
   
   >