Ajax和JSON完成二级菜单联动的功能

首先需要找好JSON的包哦:

  链接:http://pan.baidu.com/s/1jH6gN46 密码:lbh1

1:首先创建一个前台页面,比如secondMenu.jsp,源码如下所示:

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>二级菜单联动</title>
 8 <script type="text/javascript" src="js/jquery.min.js"></script>
 9 <script type="text/javascript">
10     $(function(){
11         //给下拉列表添加事件
12         $("#city1").change(function(){
13             //测试可以拿到值,也用于测试是否正确引入js
14             //alert($(this).val()+" "+$("#city1 option:selected").text());
15             //post传输,固定四个参数;
16             //第一个参数是url:发送请求地址
17             //第二个参数data:待发送的值key/value
18             //第三个参数callback:发送返回时回调函数
19             //第四个参数type:返回内容格式,常用text,json,
20             $.post("city",{city1:$(this).val()},
21                 function(result){
22                 
23                 //获取第二级城市的id
24                 var city2=$("#city2");
25                 //清空第二级里面的城市
26                 city2.empty();
27                 for(var i=0;i<result.length;i++){
28                     city2.append("<option value="+result[i].id+">"+result[i].name+"</option>");
29                 }
30                 
31             },"json");
32         });
33     });
34 </script>
35 
36 </head>
37 <body>
38 
39 <h2>城市</h2>
40 <select id="city1" onchange="">
41     <option value="1">河南</option>
42     <option value="2">北京</option>
43 </select>
44 
45 <select id="city2">
46     <option value="1001"></option>
47     <option value="1002"></option>
48     <option value="1003"></option>
49     <option value="1004"></option>
50 </select>
51 
52 </body>
53 </html>

2:然后创建一个实体类,比如CityInfo.java,源码如下所示:

 1 package com.bie.po;
 2 /** 
 3 * @author BieHongLi 
 4 * @version 创建时间:2017年3月4日 下午3:48:48 
 5 * 城市的实体类
 6 */
 7 public class CityInfo {
 8 
 9     private Integer id;
10     private String name;
11     public Integer getId() {
12         return id;
13     }
14     public void setId(Integer id) {
15         this.id = id;
16     }
17     public String getName() {
18         return name;
19     }
20     public void setName(String name) {
21         this.name = name;
22     }
23     //重写构造方法
24     public CityInfo(Integer id, String name) {
25         super();
26         this.id = id;
27         this.name = name;
28     }
29     
30     
31 }

3:模拟数据库进行后台处理,在servlet页面进行处理,源码如下所示:

 1 package com.bie.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.ArrayList;
 6 import java.util.List;
 7 
 8 import javax.servlet.ServletException;
 9 import javax.servlet.annotation.WebServlet;
10 import javax.servlet.http.HttpServlet;
11 import javax.servlet.http.HttpServletRequest;
12 import javax.servlet.http.HttpServletResponse;
13 
14 import com.bie.po.CityInfo;
15 
16 import net.sf.json.JSONArray;
17 
18 /** 
19 * @author BieHongLi 
20 * @version 创建时间:2017年3月4日 下午3:36:32 
21 * 
22 */
23 @WebServlet("/city")
24 public class SecondMenuServlet extends HttpServlet{
25 
26     private static final long serialVersionUID = 1L;
27 
28     @Override
29     protected void doGet(HttpServletRequest request, HttpServletResponse response) 
30             throws ServletException, IOException {
31         this.doPost(request, response);
32     }
33 
34     @Override
35     protected void doPost(HttpServletRequest request, HttpServletResponse response) 
36             throws ServletException, IOException {
37         //获取前台页面传输的数据
38         String city1=request.getParameter("city1");
39         System.out.println("测试数据:"+city1);
40         
41         //存放城市的实体类
42         List<CityInfo> list=new ArrayList<>();
43         //模拟数据库,将前台的数据进行匹配,如果匹配显示下面创建的城市
44         if("1".equals(city1)){
45             for(int i=0;i<10;i++){
46                 CityInfo ci=new CityInfo(i, "新乡"+i);
47                 list.add(ci);
48             }
49         }
50         if("2".equals(city1)){
51             for(int i=0;i<10;i++){
52                 CityInfo ci=new CityInfo(i, "北京"+i);
53                 list.add(ci);
54             }
55         }
56         
57         //将json所需的包放到lib里面,将list转换为json
58         JSONArray json=JSONArray.fromObject(list);
59         
60         //响应前台页面
61         response.setCharacterEncoding("utf-8");
62         response.setContentType("text/json");
63         PrintWriter out=response.getWriter();
64         out.println(json);//打印json,为了前台页面获取
65         out.flush();//刷新流
66         out.close();//关闭流
67     }
68     
69 }

效果如下所示:

革命尚未成功,别先生仍需努力啊!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏信安之路

PE 病毒与 msf 奇遇记

通俗的讲,PE 病毒就是感染 PE 文件的病毒,通过修改可执行文件的代码中程序入口地址,变为恶意代码的的入口,导致程序运行时执行恶意代码。

640
来自专栏后端之路

jsp改造之sitemesh修改tagRule

背景 上篇说了一些sitemesh的注意事项jsp改造之sitemesh注意事项 事实上我们最开始的目的很简单 其实需要把script放到页面最下 同时考虑针对...

2524
来自专栏前端新视界

CSS 预处理器中的循环

本文由 nzbin 翻译,黄利民 校稿。未经许可,禁止转载! 英文出处:Loops in CSS Preprocessors 发表地址:http://we...

2066
来自专栏游戏杂谈

利用threshold实现的遮罩引导

点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。fa...

661
来自专栏腾讯Bugly的专栏

Duang~ Android堆栈慘遭毁容?精神哥揭露毁容真相!

最近精神哥接到多个小伙伴的投诉,说无法看懂Bugly崩溃克星页面上显示的堆栈信息!精神哥赶紧把正研究的Top Crash崩溃和心爱的鸡爪放下,开始着手跟进。经分...

3085
来自专栏编程

你试过C语言和Python一起混合编程吗?两者相加不是已经无敌了!

C语言是编程语言的祖母吗,但是随着一代一代的编程语言长大,所以祖母也是会拍在沙滩上的,很多小小伙伴应该都会学过或者了解C语言,因为软件系的会教嘛,但是Pytho...

2080
来自专栏犀利豆的技术空间

Java 渲染 docx 文件,并生成 pdf 加水印

一顿google以后发现了 StackOverflow 上的这个回答:Converting docx into pdf in java 使用如下的 jar 包:

1171
来自专栏跟着阿笨一起玩NET

单件模式Singleton来控制窗体被重复或多次打开

本文转载:http://blog.csdn.net/a0700746/article/details/4473796

462
来自专栏AI科技大本营的专栏

送书 | Python编程:从入门到实践

本文摘自《Python编程:从入门到实践》一书,本书是Amazon编程入门类榜首图书,是一本全面的Python编程从入门到实践教程,带领读者快速掌握编程基础知识...

47910
来自专栏蓝天

awk给外部变量赋值

假设将值存在文件t中,文件t内容如下,只有一行:a b c 需要将a、b和c分别赋给外部变量x、y和z,则脚本可写成如下: eval $(awk '{ pr...

713

扫码关注云+社区