`
rentianchou
  • 浏览: 69654 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

简单介绍json+jquery使用

阅读更多

在上一个项目用到ajax的地方非常多,现在对其进行一个总结。

在做项目的时候主要用到了jquery+json。之所以选择jquery而没用dwr来接收后台传过来的数据是因为jquery很轻,不会像DWR那样有繁琐的配置。Json也会有很多第三方的工具,现在用的比较多的是json-liborg.json,对应选择哪种根据自己的喜好,json-liborg.json的操作方式基本是一样的,个人认为json-lib依赖的包比较多,如下图:

Json-lib requires (at least) the following dependencies in your classpath:

  • jakarta commons-lang 2.4
  • jakarta commons-beanutils 1.7.0
  • jakarta commons-collections 3.2
  • jakarta commons-logging 1.1.1
  • ezmorph 1.0.6

 

 

org..json直接下载包就可以直接使用,相对来说比较前者依赖轻,但是json-lib对于属性的支持比较好一些,比方说处理hibernate的级联关系的pojo数据生成问题,在处理存在级联关系的pojo时,使用fromObject时就会报:net.sf.json.JSONException: There is a cycle in the hierarchy!,使得生成json掉入了级联的循环陷阱中,处理方法如下:

Java代码

JsonConfig jsonConfig = new JsonConfig(); jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT); String[] excludes = { "poNewsArticle", "class" }; jsonConfig.setExcludes(excludes); PoNewsComment c=newsService.getCommentById(id); JSONObject jsonObject = JSONObject.fromObject(c); System.out.println(jsonObject.toString()); JsonConfig jsonConfig = new JsonConfig(); jsonConfig.setCycleDetectionStrategy(CycleDetectionStrategy.LENIENT); String[] excludes = { "poNewsArticle", "class" }; jsonConfig.setExcludes(excludes); PoNewsComment c=newsService.getCommentById(id); JSONObject jsonObject = JSONObject.fromObject(c); System.out.println(jsonObject.toString());



  

 

 

PoNewsComment.java

Java代码

public class PoNewsComment implements java.io.Serializable { // Fields private Integer commentId; private PoNewsArticle poNewsArticle;//关联的新闻的pojo private String comment; private String commenter; private Date commentTime; private short commentStatus; private String commenterIp; //省略set、get方法 }


 

 

 

 其实其他的情况都可以使用JsonConfig来处理,包括时间转换,数据类型的转换等等。

那么下面对org..json的使用进行详细介绍:

其实org.json2个重要的类就是JSONObject.javaJSONArray.java2个类,

JSONObject的主要作用就是对对象进行键/值对的存储,而JSONArray是提供了数组形式的存储。

下面来看下代码:

public class User { private String name; private String id; private List list; //set/get略; }


 

Servlet代码如下:

 

public class TestJson extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.setContentType("text/html;charset=gb2312"); List list = new ArrayList(); List list1 = new ArrayList(); list.add("s1"); list.add("s2"); User u = new User(); u.setId("1"); u.setName("2"); u.setList(list); User u1 = new User(); u1.setId("3"); u1.setName("4"); u1.setList(list); list1.add(u); list1.add(u1); JSONArray arr = new JSONArray(); arr.put(list1); //arr.put("s2"); String s = arr.toString(); PrintWriter out = response.getWriter(); out.print(s); out.close(); System.out.println(s); } }



 我们看到控制台输出:

 

 

[[{"list":["s1","s2"],"name":"2","id":"1"},{"list":["s1","s2"],"name":"4","id":"3"}]]

前台我们用jquery来接受 <script type="text/javascript" src="<%=basePath%>jquery.js" ></script> <script type="text/javascript"> function json(){ $.post("json",{"a":"1"},function (data){ alert(data[0][0].list[0]); //我们得到第一个数组的list的s2 }, "json" ); } </script> </head> <body> <input type="button" value="测试json" onclick="json();" /> </body>



 

 

这里不得不提下jquery的一个bug,就是JQuery.post(url,[data],[callback],[type])里第2个参数必须为填上,也就是上面代码中红色部分,如果是如下的话

 

function json(){ $.post("json",function (data){ alert(data[0][0].list[0]); //我们得到第一个数组的list的s2 }, "json" ); }



 那么

 

jquery不管你最好的参数是否设置的是接收“json”数据格式 ,都无效。也就是说不会以json数据格式进行接收,所以我们我随便填了一个数据。

 

下面来看下如何用JSONObject protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub response.setContentType("text/html;charset=gb2312"); List list = new ArrayList(); List list1 = new ArrayList(); list.add("s1"); list.add("s2"); User u = new User(); u.setId("1"); u.setName("2"); u.setList(list); User u1 = new User(); u1.setId("3"); u1.setName("4"); u1.setList(list); list1.add(u); list1.add(u1); //JSONArray arr = new JSONArray(); JSONObject arr = new JSONObject(); try { arr.put("test", list1); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } //arr.put(list1); //arr.put("s2"); String s = arr.toString(); PrintWriter out = response.getWriter(); out.print(s); out.close(); System.out.println(s); }



 

输入格式为:

{"test":[{"list":["s1","s2"],"name":"2","id":"1"},{"list":["s1","s2"],"name":"4","id":"3"}]}

 

前台接收就是

function json(){ $.post("json",{"a":"1"},function (data){ alert(data.test[0].list[1]); }, "json" ); }


  

 

 

 

简单介绍到此

分享到:
评论

相关推荐

    Struts2+JSON+JQuery实现简单的验证

    Struts2、JSON和JQuery是Web开发中的三个关键技术,它们常常被结合使用来构建高效、动态的用户界面。在本教程中,我们将探讨如何利用这些技术实现一个简单的验证功能。 首先,Struts2是一个基于MVC(Model-View-...

    ssi+json+jquery 案例

    4. JavaScript文件:包含使用jQuery处理JSON数据和实现动态交互的脚本。 5. JSON文件:可能包含用于前端展示或后端交互的数据格式。 6. 配置文件:如Struts2的配置XML,Spring3的bean定义XML,以及可能的iBatis2映射...

    一个简单的struts2+json+jquery 交互的例子

    总结来说,这个例子展示了如何利用Struts2处理后端业务逻辑,使用JSON作为数据交换格式,以及通过jQuery在前端实现动态更新和与服务器的异步通信。了解和掌握这三个工具的整合使用,对于提升Web开发效率和用户体验...

    json +jquery DEMO AJAX

    在AJAX中,JSON起到了桥梁的作用,将服务器端的数据以结构化的形式传递到客户端,而jQuery的AJAX功能则使得这个过程变得简单易用。在本DEMO中,我们将探讨如何结合JSON和jQuery实现AJAX交互。 首先,了解jQuery的...

    Struts2+json+jQuery使用方式.rar

    在与Struts2和JSON结合使用时,jQuery通过Ajax请求获取JSON数据,然后使用其丰富的API来更新页面内容,无需刷新整个页面,提高了用户体验。 以下是如何在实际项目中使用Struts2、JSON和jQuery的步骤: 1. **配置...

    简单的SSH+JQuery+JSON例子

    结合以上技术,一个简单的SSH+JQuery+JSON例子可能包含以下步骤: 1. 用户通过前端页面发送Ajax请求,请求由JQuery发起,数据格式为JSON。 2. Struts框架接收到请求,通过Action转发到Spring控制层。 3. Spring控制...

    JSON+js+jquery+ajax基础.zip

    在"JSON+js+jquery+ajax基础.zip"这个压缩包中,可能包含的教程或示例将涵盖以下几个方面: 1. JSON基础知识:介绍JSON的语法结构,如对象和数组的表示,以及如何在JavaScript中创建和解析JSON对象。 2. JavaScript...

    strust2与json+jquery结合的注册用户验证

    4. **前端验证**:在用户提交注册信息前,通常会先在前端进行简单的验证,如非空检查、格式验证等,这可以通过jQuery的DOM操作和事件处理实现。前端验证可以提供即时反馈,提高用户体验,但必须配合后端验证以确保...

    java+json+jquery经典实例

    结合“java+json+jquery经典实例”这个标题和描述,我们可以推断这个压缩包可能包含了一些使用Java后端处理数据,通过JSON格式进行传输,并利用jQuery在前端展示和操作数据的简单示例项目。例如,它可能有一个简单的...

    J2EE中JSON+Jquery_AJAX应用

    总结来说,"J2EE中JSON+Jquery_AJAX应用"的结合使用,能够实现高效、用户友好的Web应用,提供无缝的数据交换和页面动态更新功能。在实际开发中,理解并熟练掌握这些技术,对于提升J2EE应用的用户体验和性能至关重要...

    json+servlet+jquery整合

    jQuery的设计使得改变网页变得简单,可以使用CSS选择器来选取DOM元素,使用链式操作来对元素进行各种操作,而无需考虑浏览器的兼容性问题。 Servlet是Java EE中的一种技术,用于开发动态Web应用程序。它们主要负责...

    jQuery+json+struts2 开发备忘录(一)

    在本篇“jQuery+json+struts2 开发备忘录(一)”中,我们将探讨如何使用这三种技术来构建高效且用户友好的Web应用程序。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。JSON...

    struts2+json+jquery实现ajax登录和注册功能

    在Struts2中,配合JSON插件,可以实现更高级别的数据封装,不仅限于简单的属性值传递,还能处理多层级的对象数据,为复杂的业务逻辑提供数据支撑。 #### 三、jQuery:Ajax交互的最佳拍档 jQuery是一个快速、简洁的...

    Servlet+json+js(jquery)+jsp实现分页

    本项目使用Servlet、JSON、JavaScript(JQuery)和JSP技术实现了一个简单易懂、功能完善的分页解决方案。 **Servlet** 是Java服务器端编程的基础,它负责处理HTTP请求和响应。在分页应用中,Servlet主要负责接收...

    c3p0+dbUtils+Ajax+Json+Jquery实现【增删改查】Demo

    2. **DBUtils**:Apache的DBUtils是基于Java的一个数据库操作工具库,它简化了JDBC API的使用,提供了一套简洁的API,使得数据库操作变得更加简单。DBUtils封装了JDBC的常见操作,如查询、更新等,同时提供了异常...

    json+jquery

    JSON(JavaScript Object Notation)和jQuery是Web开发中常见的技术组合,它们在数据交互和页面动态更新方面发挥着重要作用。JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。而...

    最简单的:Struts2+JSON+JQUERY+AJAX 完整DEMO源代码

    Struts2、JSON、JQUERY和AJAX是Web开发中常用的技术栈,它们结合使用能够构建出高效、交互性强的动态网页应用。本DEMO源代码提供了这些技术的集成示例,非常适合初学者理解和实践。 **Struts2** 是一个基于MVC...

    json + struts2 + 80个JQuery 效果 个例子

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用完全独立于语言的文本格式,但也使用了类似于C家族语言的习惯,包括C、C++、C#、Java、JavaScript、Perl、Python等。JSON易于人阅读和编写,...

    公交线路搜索系统,mysql+jdbc+servlet+freemarker+json+jquery+arttemplate+百

    6. jQuery:jQuery是一个广泛使用的JavaScript库,简化了JavaScript的DOM操作、事件处理、动画制作等功能。在公交线路搜索系统中,jQuery用于优化用户界面的交互性,如实现搜索框的自动提示、地图的交互控制等。 7....

Global site tag (gtag.js) - Google Analytics