jQuery 和 json 简单例子（注意callback函数的处理！！） （servlet返回json，jquery更新，java json）

最新推荐文章于 2021-10-01 16:30:20 发布
最新推荐文章于 2021-10-01 16:30:20 发布
阅读量919 收藏
点赞数
分类专栏： web jquery
web 同时被 2 个专栏收录
707 篇文章 0 订阅
订阅专栏
jquery
21 篇文章 0 订阅
订阅专栏


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
     
     >
复制代码

kenkofox@qq.com https://github.com/kenkozheng 欢迎投简历给我，力推腾讯工作机会
分类:  java & tomcat,  HTML/JS/CSS
0
0
(请您对文章做出评价)
« 上一篇： 在Tomcat中部署war
» 下一篇： enctype="multipart/form-data"的表单无法获取表单中除了type=file以外的其他参数 commons-fileupload 获取除file外其他参数

Hustudent20080101
关注
专栏目录
JavaWeb加强之JSON、jQuery、Ajax、Java正则表达式、过滤器、监听器、模板引擎FreeMarker
qq_38326107的博客
11-29 604
过滤器、监听器，以及JSON、Ajax和正则表达式等开发必备技能，并学习文件上传和验证码等功能开发。 2.4.1 JSON基础 JSON的基础语法，以及流行JSON框架FastJSON的使用。 内容： JSON语法规则： JSON数据是以key/value的形式描述，key和value中间使用冒号分隔开；多组key/value值使用逗号分隔开，例如：{ “firstName”:“John” , “lastName”:“Doe” }。 JSON的作用主要就是数据的存储与传输，易于人阅读和编写，同时也易
Java Web返回JSON
达拉斯母牛
07-03 1万+
Web项目中经常涉及到AJAX请求返回JSON和JSONP数据。JSON数据在服务器端和浏览器端传输，本质上就是传输字符串，不过这个字符串符合JSON语法格式。浏览器端会按照普通文本的格式接收JSON字符串，最终JSON字符串转成JSON对象通过JavaScript实现。目前部分浏览器(IE9以下浏览器没有提供)和常用的JS库都提供了JSON序列化和反序列化的方法，如jQuery的AJAX请求可以
jsonp之callback
zwZLC的博客
09-20 1935
在进行跨域请求时，使用到jsonp。在某一环节需要使用到请求接口返回的结果，再去进行下一步操作。第一想法是使用return，将data.msg返回，使用其值进行判断。在编写过程中发现jsonp不支持同步请求，因此return回来的值有问题。这时候可以采用jsonp的回调函数来实现，如下。 function callb () { getFlagNullAjax(local+'/auto
jquery ajax jsonp callback java 解决方案2
weixin_30325971的博客
06-12 78
Response.Write(callback "('" sbJson.ToString() "')"); 转载于:https://www.cnblogs.com/yqskj/archive/2013/06/12/3133243.html
Ajax基础：发送jsonp请求（jsonp、jsonCallback）
昔冰_G的博客
10-01 1万+
jsonp走的是get请求方式，也就是ajax的默认请求方式； ajax方法中也涵盖了jsonp请求，可以通过ajax方法来发送jsonp请求； <!--客户端代码--> <body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt
安卓项目实战之强大的网络请求框架okGo使用详解（二）：深入理解Callback之自定义JsonCallback
智玲君
10-30 6228
更新中。。。
使用getJSON()异步请求服务器返回json格式数据的实现
12-12
服务器端，通常使用Java的Servlet来处理请求并返回JSON数据。例如： ```java @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { ...
JQuery.rar_Jsp/Servlet_Java_
08-11
通过AJAX调用Servlet，Servlet处理业务逻辑后，将结果以JSON或HTML形式返回给jQuery，再由jQuery更新页面内容。 例如，一个简单的提交表单的示例： ```jsp $(document).ready(function(){ $("#myForm")....
jQuery实现将mysql数据库中的数据转化为json数据在前台显示
04-27
本主题聚焦于"jQuery实现将mysql数据库中的数据转化为json数据在前台显示"，涉及到的关键技术包括jQuery的$.getJSON()和$.ajax()方法，以及后台的servlet和mysql数据库。 首先，jQuery是一个轻量级的JavaScript库，...
jsonp和jsonpcallback的使用
考拉很OK
11-22 965
这个参数会加在请求的URL后面。Jquery 在每次跨域发送请求时都会有callback这个参数，其实这个参数的值就是回调函数名称，所以，服务器端在发送json数据时，应该把这个参数放到前面，这个参数的值往往是随机生成的，如：jsonp1294734708682，同时也可以通过 $.ajax 方法设置 jsonpcallback 方法的名称。这样，json 数据 {\"userid\":0,\"username\":\"null\"} 就作为了 jsonp1294734708682 回调函数的一个参数。
Jquery跨域获得Json
weixin_33727510的博客
06-24 371
这两天用 Jquery 跨域取数据的时候，经常碰到 invalid label 这个错误，十分的郁闷，老是取不到服务器端发送回来的 json 值， 一般跨域用到的两个方法为：$.ajax 和$.getJSON   最后，仔细安静下来，细读 json 官方文档后发现这么一段：   JSON数据是一种能很方便通过JavaScript解析的结构化数据。如果获取的数据文件存放在远程服务器上（域名...
jQuery调用ajax返回json对象
Luke_R的博客
09-07 629
$.get(url,[data],[fn],[type])跟$.post差不多，就以get为例子说明一下： 前端代码：（只能用each来遍历刚得到的json对象数组） $("#link").click(function(){ //前提是一定要得到json格式的字符串 $.get("${pageContext.request.contextPath}/jsonServle
json对象与json字符串互转，ajax各常见函数
坚持的专栏
12-05 1万+
1、使用jquer插件支持的转换方式： $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2、浏览器支持的转换方式： JSON.parse(jsonstr); //可以将json字符串转换成json对象 JSON.stringify(jsonobj); //可以将json对象转换成json对符
jsp发送ajax请求，servlet返回json对象实例
慧写代码
01-22 1591
在使用ajax过程中， jsp页面向servlet发送请求的数据data参数的写法，servlet返回给jsp页面的json对象的格式有特定的要求，在实际的开发过程中，必须十分注意json对象的格式，具体见下图实例： json对象的格式必须为{"xxx":xxx,"xxx":xxx} 如果不是以上格式，ajax中的success参数的结果不会执行。
[前端] jquery方法 遍历返回的对象数组
网站前端/PHP/Android/其他
06-10 1384
$.each(); 遍历数组<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>json</title> <script src="../jquery.min.js"></script> </head> <body> <button type="button">获取</button> <u
servlet返回数据的方法
热门推荐
java_trainee的博客
12-13 2万+
servlet返回数据的方法 方法 1. RequestDispatcher.forward()界面跳转 HttpSession session =request.getSession(); Object obj = session.getAttribute (LoginConstants.LOGIN_USER); if (null !=...
jQueryAjax函数详解：get(), post(), ajax(), getJSON()比较
例如，上述代码片段中，`$.ajax()`用于发送POST请求到`ajax/ajax_selectPicType.aspx`，请求类型为JSON，请求成功时调用`Callback`函数处理响应，失败时执行`BackErr`错误处理函数。 4. **$.getJSON()**: 专门用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值