jquery+json小例子

cn_arthurs

浏览: 321771 次
性别:
来自: 北京

最近访客更多访客>>

ningzong

shdavidzhang

robotmen

zhang_sun

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web应用

json jQuery Servlet Apache JavaScript

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

直接进入主题，使用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在附件中

jslib.rar (21.7 KB)
下载次数: 642

16
顶

0
踩

分享到：

能够自由拖动布局区域的网页 | JSON介绍

2009-02-19 16:08
浏览 9971
评论(8)
分类:Web前端
查看更多

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

2 楼 chris_zcl 2010-02-04

chris_zcl 写道

太好了

再顶你一下~

1 楼 chris_zcl 2010-02-04

太好了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论