利用jquery、json实现前台无刷新的多级联动下拉菜单

这两天我都在做一个项目，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();
		}
	}
}
4、在前台中，使用jquery语句发送请求到后台，比如一下代码：

<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&para2=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);
	}
上面的那个方法配置成一个action，查询出所需要的数据，
，查询出来后使用刚刚我们写的那个组件里面的静态方法发送数据到前台，注意，这里我查询出的只是单值，我没有试过查询出是对象时前台的处理情况，有兴趣的可以试试，上面的那个查询实际上相当于发送了一条类似于select name from person的sql语句，如果是这样的话那么一会前台要输出的时候就是修改上面的那个jquery方法getJSON的function（data），因为是单值，所以$("#course_term").append("<option value="+data[i][0]+">" + data[i][1]+ "</option>");需要改为$("#course_term").append("<option value="+data[i]+">" + data[i]+ "</option>");如果你查询的结果是多值的，比如类似于一下sql语句：select name,age from person这样的话直接使用
$("#course_term").append("<option value="+data[i][0]+">" + data[i][1]+ "</option>");
即可，data[i][0]既是name的值，data[i][1]是age的值。

6、数据返回到了前台后进行处理，第一个下拉菜单数据项从数据库中加载，这样在可以写类似上面的那段jquery方法，写在某个select标签的onchange事件中，这样当select选中项改变的时候就会执行jquery方法，传递那个select的选择项的value，传到后台再根据这个value查询出结果，就这样再返回前台，即可实现多级联动选择菜单。