首先需要找好JSON的包哦：

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

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

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>二级菜单联动</title>

 <script type="text/javascript" src="js/jquery.min.js"></script>

 <script type="text/javascript">

     $(function(){

         //给下拉列表添加事件

         $("#city1").change(function(){

             //测试可以拿到值，也用于测试是否正确引入js

             //alert($(this).val()+" "+$("#city1 option:selected").text());

             //post传输，固定四个参数；

             //第一个参数是url:发送请求地址

             //第二个参数data:待发送的值key/value

             //第三个参数callback:发送返回时回调函数

             //第四个参数type:返回内容格式，常用text，json,

             $.post("city",{city1:$(this).val()},

                 function(result){

                 //获取第二级城市的id

                 var city2=$("#city2");

                 //清空第二级里面的城市

                 city2.empty();

                 for(var i=0;i<result.length;i++){

                     city2.append("<option value="+result[i].id+">"+result[i].name+"</option>");

                 }

             },"json");

         });

     });

 </script>

 </head>

 <body>

 <h2>城市</h2>

 <select id="city1" onchange="">

     <option value="1">河南</option>

     <option value="2">北京</option>

 </select>

 <select id="city2">

     <option value="1001"></option>

     <option value="1002"></option>

     <option value="1003"></option>

     <option value="1004"></option>

 </select>

 </body>

 </html>

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

 package com.bie.po;

 /**

 * @author BieHongLi

 * @version 创建时间：2017年3月4日 下午3:48:48

 * 城市的实体类

 */

 public class CityInfo {

     private Integer id;

     private String name;

     public Integer getId() {

         return id;

     }

     public void setId(Integer id) {

         this.id = id;

     }

     public String getName() {

         return name;

     }

     public void setName(String name) {

         this.name = name;

     }

     //重写构造方法

     public CityInfo(Integer id, String name) {

         super();

         this.id = id;

         this.name = name;

     }

 }

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

 package com.bie.servlet;

 import java.io.IOException;

 import java.io.PrintWriter;

 import java.util.ArrayList;

 import java.util.List;

 import javax.servlet.ServletException;

 import javax.servlet.annotation.WebServlet;

 import javax.servlet.http.HttpServlet;

 import javax.servlet.http.HttpServletRequest;

 import javax.servlet.http.HttpServletResponse;

 import com.bie.po.CityInfo;

 import net.sf.json.JSONArray;

 /**

 * @author BieHongLi

 * @version 创建时间：2017年3月4日 下午3:36:32

 *

 */

 @WebServlet("/city")

 public class SecondMenuServlet extends HttpServlet{

     private static final long serialVersionUID = 1L;

     @Override

     protected void doGet(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         this.doPost(request, response);

     }

     @Override

     protected void doPost(HttpServletRequest request, HttpServletResponse response)

             throws ServletException, IOException {

         //获取前台页面传输的数据

         String city1=request.getParameter("city1");

         System.out.println("测试数据："+city1);

         //存放城市的实体类

         List<CityInfo> list=new ArrayList<>();

         //模拟数据库，将前台的数据进行匹配，如果匹配显示下面创建的城市

         if("1".equals(city1)){

             for(int i=0;i<;i++){

                 CityInfo ci=new CityInfo(i, "新乡"+i);

                 list.add(ci);

             }

         }

         if("2".equals(city1)){

             for(int i=0;i<10;i++){

                 CityInfo ci=new CityInfo(i, "北京"+i);

                 list.add(ci);

             }

         }

         //将json所需的包放到lib里面,将list转换为json

         JSONArray json=JSONArray.fromObject(list);

         //响应前台页面

         response.setCharacterEncoding("utf-8");

         response.setContentType("text/json");

         PrintWriter out=response.getWriter();

         out.println(json);//打印json，为了前台页面获取

         out.flush();//刷新流

         out.close();//关闭流

     }

 }

效果如下所示：

革命尚未成功，别先生仍需努力啊！！！

Ajax和JSON完成二级菜单联动的功能的更多相关文章

  1. 省市联动_简单的Demo，适用于各种二级菜单联动

    最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...

  2. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  3. juqery easy ui 实现二级菜单联动

    实现效果 代码: <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat= ...

  4. jquery json实现二级动态联动

    以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $ ...

  5. Excel实现二级菜单联动

    项目中需要导入一个Excel模板需要实现二级联动,现记录如下: 首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干行为对应省市下面的地名和区名.需要在另外一张工作表中A列和B列建立 ...

  6. Struts2二级菜单联动

    http://www.cnblogs.com/wujixing/p/5194461.html ps: Java面试 http://blog.csdn.net/zhang070809/article/d ...

  7. 利用Ajax和JSON实现关于查找省市名称的二级联动功能

    功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...

  8. 基于jQuery+JSON的省市县 二级 三级 联动效果

    省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...

  9. java结合jQuery.ajax实现左右菜单联动刷新列表内容

    http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...

随机推荐

  1. jquery 遍历 json【转】

    jquery 遍历 json <HTML> <HEAD> <meta http-equiv="content-Type" content=" ...

  2. POJ - 1039 Pipe（计算几何）

    http://poj.org/problem?id=1039 题意 有一宽度为1的折线管道,上面顶点为(xi,yi),所对应的下面顶点为(xi,yi-1),假设管道都是不透明的,不反射的,光线从左边入 ...

  3. Html-Css 从入门到放弃（一）基础知识

    注意要点: 1.ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用. 2.class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,clas ...

  4. AsciiMorph - 新奇的 ASCII 字符画生成工具&插件

    AsciiMorph 是一个新奇的 ASCII 字符画生成工具和开源插件.字符画(ASCII Art)的历史可以追溯到几十年前,起初是用在图形显示功能受限的设备上,用ASCII字符集里的可打印字符来拼 ...

  5. js设定延迟时间的函数

    1.如果想要在执行一个js函数之前延迟一段时间应该怎么做? 答:"setTimeout('update()',1000);" 其中update()函数就是延迟后执行的函数,后面的时 ...

  6. 3d图像识别基础论文：pointNet阅读笔记

    PointNet 论文阅读: 主要思路:输入独立的点云数据,进行变换不变性处理(T-net)后,通过pointNet网络训练后,最后通过最大池化和softMax分类器,输出评分结果. 摘要: 相较于之 ...

  7. gflags命令行参数解析

    gflags库是google开源的命令行参数解析工具. 安装 官方没有提供二进制库,但是Debian/Ubuntu平台本身提供了二进制库,可以直接git clone https://github.co ...

  8. Maven入门-安装及配置(一)

    0.Maven简介 三种仓库:

  9. 【转载】Hadoop mapreduce 实现原理

    1.  如何用通俗的方法解释MapReduce MapReduce是Google开源的三大技术之一,是对海量数据进行“分而治之”计算框架.为了简单的理解并讲述给客户理解.我们举下面的例子来说明. 首先 ...

  10. py-faster-rcnn + opencv3.0.0 + ubuntu16.04配置（CPU模式）

    最近开始做行人检测,因此开始接触faster-rcnn,这里贴上配置教程(亲测可行),不过是基于cpu的,蓝瘦... 参考博客:http://www.tuicool.com/articles/nYJr ...