Json格式数据在Web前端页面的应用

最新推荐文章于 2025-03-23 12:31:05 发布

最新推荐文章于 2025-03-23 12:31:05 发布 · 536 阅读

标签

#json #Web #Struts #Apache #Ajax

JSON 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在服务器端将Java对象转换为JSON格式，并通过HTTP响应发送到客户端。同时展示了客户端使用jQuery解析这些数据的方法。

之前已经说了怎么把对象中的数据格式化成json数据和将json格式的字符串转换成对象。现在说说怎么将json数据发送到客户端，并且在客户端进行使用。

[color=red]第一步，把json数据发送到客户端：[/color]

package test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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

import net.sf.json.JSONObject;

import org.apache.log4j.Logger;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;

public class Tes3 extends DispatchAction {


	protected final Logger logger = Logger.getLogger(getClass());

	public void redtest(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		Student stu1 = new Student(1, "goodboy", 20, "boy", "我的老家在东北，家住松花江上啊",	"123456789123456789");
		Student stu2 = new Student(2, "goodboy", 20, "boy", "我的老家在东北，家住松花江上啊",	"123456789123456789");
		List<Student> stus = new ArrayList<Student>();

		stus.add(stu1);
		stus.add(stu2);
		ClassS classs = new ClassS(1, "class1", stus);
		stu1.setClasss(classs);
		stu2.setClasss(classs);
		System.out.println();
		String text = JSONObject.fromObject(classs,	FiltrateUtil.filtrate(new String[] { "classs" })).toString();
		try {
			response.setContentType("text/x-json;charset=UTF-8");
			response.getWriter().write(text);
			response.flushBuffer();
		} catch (IOException e) {
			logger.error(e);
		}
	}

}

[color=red] 过滤器：[/color]

package test;


import net.sf.json.JsonConfig;
import net.sf.json.util.PropertyFilter;
/**
 *
 * 功能描述：过滤掉格式化数据为json格式的时候的自身关联
 * 
 */
public class FiltrateUtil {

	public static JsonConfig filtrate(final String[] str) {
		JsonConfig config = new JsonConfig();
		config.setJsonPropertyFilter(new PropertyFilter() {
			public boolean apply(Object source, String name, Object value) {
				if(str!=null&&str.length>0){
					boolean flag = false;
					for(int i = 0;i<str.length;i++){
						if (name.equals(str[i])) {
							flag = true;
							break;
						}
					}
					return flag;
				}else{
					return false;
				}
			}
		});
		return config;
	}
}

数据传输到了客户端，就可以轻易而举的将数据取出来了。
首先你要在你的页面引入jquery.min.js

<script type="text/javascript" src="jquery.min.js"></script>

[color=red]然后代码如下：[/color]

$(document).ready(function(){
	$.ajax({
		   type: "POST",
		   url: "${ctx}/stockCheckAction.do?method=redtest",
		   success: function(msg){
			   alert("classId:"+msg.id+",className:"+msg.name);
			   alert("student1---:id"+msg.students[0].id+",name:"+msg.students[0].name+",address:"+msg.students[0].address);
			   alert("student2---:id"+msg.students[1].id+",name:"+msg.students[1].name+",address:"+msg.students[1].address);
		   }
		});
});

我这里只是简单的取出来看下，如果你使用可以处理json数据的js组件，将数据传给你的组件你的组件就有了数据。如果你不能弹出数据就将msg 进行下处理 eval(msg)。
取出来的数据你可以给页面的一些文本框赋值或者供你的js代码使用。