这两天我都在做一个项目,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);
}