这两天我都在做一个项目,s2sh的一个项目,里面有一个模块需要实现菜单多级联动,然后问了一个同学,他给我提供了一个解决方案,是利用jquery还有json做的,现在把他写出来,第一,分享给需要的人,第二,也当时我自己的一个备份吧,如果以后忘记了还可以返回了看看。
要实现无刷新多级联动,则需要按照以下步骤:



1、需要使用json-lib框架, 到http://json-lib.sourceforge.net下载json-lib-1.1-jdk15.jar,运行json还需要的包有:commons-lang.jar、commons-logging.jar,commons-beanutils.jar、xom-1.0-2005-01-05.jar、ezmorph-1.0.1.jar,可在http://www.docjar.com搜索下载。将那些包下载好后放进项目的Build Path即可。
我已打包上传,可以直接到点击打开链接下载json-lib包下载即可
2、在需要使用多级联动菜单的前台界面代码中,引用jquery文件。
3、自己编写一个json组件,也就是一个java类,方便后面从数据库中查询出数据后直接使用该类的静态方法发送json数据到前台。
代码如下:
package com.ms.teach.by.utils;


import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Set;

import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

import org.apache.struts2.ServletActionContext;

/**
 * @author chaoming
 */
public class JSONUtils{

	/**以JSON格式传递数据到客户端*/
	public static void sendOfJSON(List list) {
		if(list!=null && list.size()>0){
			JSONArray jr = JSONArray.fromObject(list);
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setHeader("cache-control", "no-cache");
			response.setContentType("text/json");
			response.setCharacterEncoding("UTF-8");
			PrintWriter out;
			try {
				out = response.getWriter();
				String jsonUser = jr.toString();
				//System.out.println(jsonUser);
				out.print(jsonUser);
				out.flush();
				out.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
	/**以JSON格式传递数据到客户端*/
	public static void sendOfJSON(Set set) {
		JSONArray jr = JSONArray.fromObject(set);
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setHeader("cache-control", "no-cache");
		response.setContentType("text/json");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out;
		try {
			out = response.getWriter();
			String jsonUser = jr.toString();
			//System.out.println(jsonUser);
			out.print(jsonUser);
			out.flush();
			out.close();
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
}
<script type="text/javascript">
	function getCourseTermByJSON() {
		$.getJSON("NativeCourses_getCourseTermByJSON", "", function(data) {
			$("#course_term option").remove();
			$("#course_term").append("<option>===请选择授课学期===</option>");
			$.each(data, function(i) {
				$("#course_term").append(
						"<option value="+data[i][0]+">" + data[i][1]
								+ "</option>");
			});
		});
	}
</script>
上面的这段代码主要就是发送请求到后台的action,action的名字是NativeCourses_getCourseTermByJSON,那个jquery的getJSON方法第一个参数就是action的地址,第二个参数就是要传递到后台的参数,当有多个参数要传递的时候可以使用&来连接,比如para1=1¶2=2,第三个参数就是一个方法,主要是对后台传递回来的json数据进行处理。下面的那个course_term就是select标签的id。要在body的onload事件中执行上面那个方法,这样页面在载入的时候就可以直接从后台中查询想要的数据。
经过我的尝试,如果返回的data是java对象的话,输出的时候可以这样:data[i].name、data[i].age。
5、在后台的action无返回参数,即void类型的一个方法,比如一下代码:
public void getCourseTermByJSON() {
		List l = this.nativeCoursesDAO.getCourseTerm();
		JSONUtils.sendOfJSON(l);
	}