jQuery 和 json 简单例子

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
    
    
    
    >