《2022年2022年利用jquery、json实现前台无刷新的多级联动下拉菜单》由会员分享，可在线阅读，更多相关《2022年2022年利用jquery、json实现前台无刷新的多级联动下拉菜单（4页珍藏版）》请在金锄头文库上搜索。
1、利用 jquery 、json 实现前台无刷新的多级联动下拉菜单博客地址： http:/ 的一个项目， 里面有一个模块需要实现菜单多级联动，然后问了一个同学，他给我提供了一个解决方案，是利用 jquery还有 json 做的，现在把他写出来，第一，分享给需要的人，第二，也当时我自己的一个备份吧， 如果以后忘记了还可以返回了看看。要实现无刷新多级联动，则需要按照以下步骤：1、 需要使用 json-lib框架，到 http:/json- 下载 json-lib-1.1-jdk15.jar ，运行 json 还需要的包有：commons-lang.jar、commons-logging.jar ，
2、commons-beanutils.jar 、xom-1.0-2005-01-05.jar 、ezmorph-1.0.1.jar ，可在 http:/搜索下载。将那些包下载好后放进项目的Build Path即可。我已打包上传，可以直接到点击打开链接下载json-lib包下载即可2、在需要使用多级联动菜单的前台界面代码中，引用jquery文件。3、自己编写一个json 组件，也就是一个java 类，方便后面从数据库中查询出数据后直接使用该类的静态方法发送json 数据到前台。代码如下：javaview plaincopy1.package com.ms.teach.by.utils; 2.3.4
3、.import java.io.IOException; 5.import java.io.PrintWriter; 6.import java.util.List; 7.import java.util.Set; 8.9.import javax.servlet.http.HttpServletResponse; 10.11.import net.sf.json.JSONArray; 12.13.import org.apache.struts2.ServletActionContext; 14.15./*名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - -
4、- - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 4 页 - - - - - - - - - 16. * author chaoming17. */18.publicclass JSONUtils 19.20./* 以 JSON格式传递数据到客户端*/21.publicstaticvoid sendOfJSON(List list) 22.if (list!=null & list.size()0) 23. JSONArray jr = JSONArray.fromObject(list); 24. HttpServletResponse response
5、= ServletActionContext.getResponse(); 25. response.setHeader(cache-control, no-cache); 26. response.setContentType(text/json); 27. response.setCharacterEncoding(UTF-8 ); 28. PrintWriter out; 29.try 30. out = response.getWriter(); 31. String jsonUser = jr.toString(); 32./System.out.println(jsonUser);
6、33. out.print(jsonUser); 34. out.flush(); 35. out.close(); 36. catch (IOException e) 37. e.printStackTrace(); 38. 39. 40. 41./* 以 JSON格式传递数据到客户端*/42.publicstaticvoid sendOfJSON(Set set) 43. JSONArray jr = JSONArray.fromObject(set); 44. HttpServletResponse response = ServletActionContext.getResponse(
7、); 45. response.setHeader(cache-control, no-cache); 46. response.setContentType(text/json); 47. response.setCharacterEncoding(UTF-8 ); 48. PrintWriter out; 49.try 50. out = response.getWriter(); 51. String jsonUser = jr.toString(); 52./System.out.println(jsonUser);53. out.print(jsonUser); 54. out.fl
8、ush(); 55. out.close(); 56. catch (IOException e) 57. e.printStackTrace(); 58. 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 4 页 - - - - - - - - - 59. 60. 4、在前台中，使用jquery语句发送请求到后台，比如一下代码： function getCourseTermByJSON() $.getJSON(NativeCourses_getCourseTermByJS
9、ON, , function(data) $(#course_term option).remove(); $(#course_term).append(=请选择授课学期=); $.each(data, function(i) $(#course_term).append( + datai1 + ); ); ); 上面的这段代码主要就是发送请求到后台的action ，action的名字是NativeCourses_getCourseTermByJSON ， 那个 jquery的 getJSON方法第一个参数就是action的地址，第二个参数就是要传递到后台的参数，当有多个参数要传递的时候可以使
10、用&来连接，比如 para1=1¶2=2 ，第三个参数就是一个方法，主要是对后台传递回来的json 数据进行处理。下面的那个course_term就是 select标签的 id 。要在 body 的 onload 事件中执行上面那个方法，这样页面在载入的时候就可以直接从后台中查询想要的数据。经过我的尝试，如果返回的data 是 java 对象的话，输出的时候可以这样：datai.name、datai.age。5、在后台的action无返回参数，即void 类型的一个方法，比如一下代码：javaview plaincopy1.publicvoid getCourseTermByJSON(
11、) 2. List l = this.nativeCoursesDAO.getCourseTerm(); 3. JSONUtils.sendOfJSON(l); 4. 上面的那个方法配置成一个action ，查询出所需要的数据，名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 4 页 - - - - - - - - - ，查询出来后使用刚刚我们写的那个组件里面的静态方法发送数据到前台，注意，这里我查询出的只是单值， 我没有试过查询出是对象时前台的处理情况，有兴趣的可以试试，
12、上面的那个查询实际上相当于发送了一条类似于select name from person的 sql 语句，如果是这样的话那么一会前台要输出的时候就是修改上面的那个jquery 方法 getJSON的 function （data），因为是单值，所以$(#course_term).append( + datai1+ );需要改为 $(#course_term).append( + datai+ );如果你查询的结果是多值的，比如类似于一下 sql 语句： select name,age from person这样的话直接使用$(#course_term).append( + datai1+ );
13、即可， datai0既是 name的值， datai1是 age 的值。6、数据返回到了前台后进行处理，第一个下拉菜单数据项从数据库中加载，这样在可以写类似上面的那段jquery方法，写在某个select标签的 onchange 事件中，这样当select选中项改变的时候就会执行jquery方法，传递那个select的选择项的value ，传到后台再根据这个 value 查询出结果，就这样再返回前台，即可实现多级联动选择菜单。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 4 页 - - - - - - - - -
