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

jquery+json小例子

阅读更多

由有不当之处,还望大家能指出。

直接进入主题,使用jquery发送请求到servlet,返回json字符串,然后在前台解析json并显示

 

后台servlet的请求处理(需要引入json.jar):

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONArray;
import org.json.JSONObject;

public class JsonViewServlet extends HttpServlet {

	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		doPost(req,resp);
	}

	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		resp.setContentType("text/html;charset=UTF-8");
		resp.setHeader("Cache-Control","no-cache");
		JSONObject json = new JSONObject();
		try{
		JSONArray members = new JSONArray();
		for(int i=0;i<10;i++){
			JSONObject member = new JSONObject()
			.put("name", "张小"+i)
			.put("age", "28")
			.put("email", "test@test.com");
			members.put(i, member);
		}
		json.put("jobs", members);
		}catch(Exception e){
			e.printStackTrace();
		}
		System.out.println(json.toString());
		resp.getWriter().write(json.toString());
	}

}

 通过上面代码,将向页面发送下面字符串:

{"jobs":[
	{"age":"28","email":"test@test.com","name":"张小0"},
	{"age":"28","email":"test@test.com","name":"张小1"},
	{"age":"28","email":"test@test.com","name":"张小2"},
	{"age":"28","email":"test@test.com","name":"张小3"},
	{"age":"28","email":"test@test.com","name":"张小4"},
	{"age":"28","email":"test@test.com","name":"张小5"},
	{"age":"28","email":"test@test.com","name":"张小6"},
	{"age":"28","email":"test@test.com","name":"张小7"},
	{"age":"28","email":"test@test.com","name":"张小8"},
	{"age":"28","email":"test@test.com","name":"张小9"}
]}

 

前台页面(需要引入jquery.js和json.js):

<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<html>
  <head>
    <title>使用jquery  ajax显示JSON数据</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script language="javascript" src="../jslib/jquery.js"></script>
    <script language="javascript" src="../jslib/json.js"></script>
  </head>
  <body>
  	<h1>JSON数据显示.</h1>
	<input type="button" value="JsonView" onClick="jsonview();">
	<div id="dateMessage">
		<table id="planTable">
			<tr><td>名称</td><td>年龄</td><td>邮箱</td></tr>
		</table>
	</div>
  </body>
</html>
<script language="javascript">
	function jsonview(){
		$.getJSON("http://localhost:8080/ajaxServlet/servlet/jsonViewServlet",null,function call(data){
		wirteHtml(data);
	});}
	function wirteHtml(data){
		//alert(data.toJSONString());
		//alert(data.jobs);//返回的data就是一个JSON的对象
		var continents = data.jobs;
		for(var i=0;i<continents.length;i++){
			//alert(continents[i].name);
			 var newLine = $("#planTable").length;
    		 var row = planTable.insertRow(newLine);
    		 var col = row.insertCell(0);
    		 col.innerHTML = continents[i].name;
    		 col = row.insertCell(1);
    		 col.innerHTML = continents[i].age;
    		 col = row.insertCell(2);
    		 col.innerHTML = continents[i].email;
		}
	}
</script>

 

WEB.XML配置

<!-- jsonView servlet -->
  <servlet>
    <servlet-name>jsonViewServlet</servlet-name>
    <servlet-class>com.arthurs.json.JsonViewServlet</servlet-class>
  </servlet>

<!-- jsonView mapping -->
  <servlet-mapping>
    <servlet-name>jsonViewServlet</servlet-name>
    <url-pattern>/servlet/jsonViewServlet</url-pattern>
  </servlet-mapping>

 

 

文中用到的jquery.js和json.js在附件中

16
0
分享到:
评论
8 楼 scxiongruoyu 2012-06-19  
很多问题啊~
7 楼 cn_arthurs 2012-05-21  
chenxun101 写道
psl19892010 写道
data是哪儿来的?

同问

data的内容是servlet返回的json数据,通过回调函数赋值给了页面中的data变量
6 楼 chenxun101 2012-05-21  
psl19892010 写道
data是哪儿来的?

同问
5 楼 psl19892010 2012-01-12  
data是哪儿来的?
4 楼 cn_arthurs 2010-10-20  
class
qiaoqinqie 写道
很好 学习了 不过我的会报异常?
严重: Servlet.service() for servlet action threw exception
java.lang.UnsupportedClassVersionError: Bad version number in .class file (unable to load class org.json.JSONArray)
at org.apache.catalina.loader.WebappClassLoader.findClassInternal(WebappClassLoader.java:2737)
at org.apache.catalina.loader.WebappClassLoader.findClass(WebappClassLoader.java:1124)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1612)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1491)
好像版本不对?


请确认你的json.jar,以及其他所需要的jar包都正确
另外tomcat运行的jre版本和jdk的编译版本是否一致
比如,你jdk1.6编译出来的class文件,如果在jdk1.5的运行环境中执行,会提示版本问题
3 楼 qiaoqinqie 2010-10-18  
很好 学习了 不过我的会报异常?
严重: Servlet.service() for servlet action threw exception
java.lang.UnsupportedClassVersionError: Bad version number in .class file (unable to load class org.json.JSONArray)
at org.apache.catalina.loader.WebappClassLoader.findClassInternal(WebappClassLoader.java:2737)
at org.apache.catalina.loader.WebappClassLoader.findClass(WebappClassLoader.java:1124)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1612)
at org.apache.catalina.loader.WebappClassLoader.loadClass(WebappClassLoader.java:1491)
好像版本不对?
2 楼 chris_zcl 2010-02-04  
chris_zcl 写道
太好了


再顶你一下~
1 楼 chris_zcl 2010-02-04  
太好了

相关推荐

    简单的SSH+JQuery+JSON例子

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

    struts2+jquery+json 小例子

    在这个"struts2+jquery+json"的小例子中,我们可能会看到以下几个关键知识点: 1. **Struts2框架**: - **Action和Result**:Struts2的核心组件,Action负责业务逻辑处理,Result负责控制页面跳转。 - **...

    jquery+ajax+json例子

    在Web开发中,jQuery、Ajax和JSON是三个非常重要的技术,它们共同构成了高效、动态的用户界面的基础。本文将深入探讨这些技术,并结合一个名为"TestJQuery"的示例来展示它们如何协同工作。 首先,jQuery是一个...

    AJAX+JQuery+JSON的综合例子

    在提供的压缩包中,"新建 文本文档.txt"可能是示例代码或者关于这个例子的说明,而"JQuery&JSON"可能是一个包含jQuery库和JSON数据文件的目录。确保正确引用这些资源,以使示例正常工作。 总结来说,这个综合例子...

    Struts2+Jquery+JSON 应用例子

    Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON Struts2 Jquery JSON

    struts2+jquery+json+ajax例子

    总结起来,"struts2+jquery+json+ajax"的例子展示了如何利用这些技术协同工作,实现一个无刷新的登录界面,提供流畅的用户体验。通过Struts2处理业务逻辑和数据验证,jQuery和Ajax负责前后端的通信,JSON作为数据...

    用Velocity改装的jquery+json+springMVC+ibatis简单例子

    在这个“用Velocity改装的jquery+json+springMVC+ibatis简单例子”中,我们探讨的是一个集成多种技术的Web应用程序开发示例。这个项目利用了Velocity作为模板引擎,jQuery作为前端JavaScript库,JSON作为数据交换...

    php+jquery+json完美结合例子

    本人折腾了两天才探索出来的, 程序简单,客服端通过jquery的getJSON函数请求PHP服务端,服务端返回一个二维数组,客户端把结果经简单处理打印出来。此例非常经典,初学者看了可以少走很多弯路(因为那些弯路我帮你...

    json+jsp+jQuery小例子

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它采用...总的来说,这个例子展示了如何结合JSON、JSP和jQuery实现一个现代Web应用的无刷新登录功能,利用AJAX实现前后端的异步通信,提高了用户体验。

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

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

    jquery+flexigrid+json的java例子(网上收集的)

    总结来说,这个“jquery+flexigrid+json的java例子”演示了如何利用jQuery进行前端交互,Flexigrid显示数据,JSON作为数据交换格式,以及Java处理后端逻辑。这是一个典型的前后端分离的Web应用架构,对于学习现代Web...

    Jquery+JSON+WebService

    在IT行业中,jQuery、JSON和WebService是三种非常关键的技术,它们在Web开发中扮演着重要角色。本篇文章将深入探讨这三者之间的交互,并详细解释它们各自的功能与用途。 首先,jQuery是一个轻量级的JavaScript库,...

    ajax+jquery+highcharts+json

    实现一个简单ajax+jquery+highcharts+json例子,主要让初学者了解ajax+jquery是怎么接受后台传过来的json数据,并显示到前台highcharts中的,以及js文件应该如何放置等问题。

    结合struts2.3.4+jQuery+mysql+json

    结合struts2.3.4+jQuery+mysql+json开发的一个小例子。

    jquery+json实例

    在这个例子中,`data.json`是包含JSON数据的文件,`data`参数是解析后的JSON对象。 ### 3. 数据绑定到页面 获取到JSON数据后,jQuery可以轻松地将数据绑定到页面元素。例如,将JSON对象的属性显示在HTML元素中: ...

    jQuery+json百度图表插件实现饼状图

    一个典型的JSON对象可能包含各个饼块的名称和对应的值,如下面的例子所示: ```json { "data": [ {"name": "类别1", "value": 335}, {"name": "类别2", "value": 310}, {"name": "类别3", "value": 260}, {...

    net+jquery+json实现ajax

    在这个例子中,它调用了"AjaxHandler.ashx"这个服务端处理程序,然后在回调函数中解析返回的JSON数据。$.each方法用于遍历JSON数组,并将数据插入到HTML元素中,使得数据在页面上动态显示出来。 总结来说,这个技术...

    基于jquery+json的通用三级联动下拉列表.rar

    在网页开发中,联动下拉列表是一种常见...这个例子对于理解和实现多级联动下拉列表非常有帮助,也展示了jQuery和JSON在前端数据管理中的应用。通过这种方式,开发者可以创建更加动态和交互性的网页应用,提高用户体验。

    .net写的3层架构的无刷新表格分页例子(ajax+jquery+json)

    在这个例子中,我们将使用jQuery库来实现客户端的AJAX请求,通过无刷新的方式更新表格内容。 2. 业务逻辑层:这部分包含了应用的核心逻辑,处理用户请求并执行相应的业务操作。在.NET中,我们通常会创建服务接口或...

Global site tag (gtag.js) - Google Analytics