Ajax和JSON完成二级菜单联动的功能
首先需要找好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完成二级菜单联动的功能的更多相关文章
- 省市联动_简单的Demo，适用于各种二级菜单联动
最近搞了一个功能,是查询页面需要用到二级菜单联动,获取到选中的属性value传入到后台. 平常都是用AJAX或者JQuery ,通过XML或者JSON的方式,这样的话需要调用数据库,像典型得到省市联动 ...
- JavaScript(jquery)实现二级菜单联动
为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...
- juqery easy ui 实现二级菜单联动
实现效果 代码: <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat= ...
- jquery json实现二级动态联动
以下为代码!需要导入json架包 function getCity1(){ var unitid = document.getElementById('addformunitid').value; $ ...
- Excel实现二级菜单联动
项目中需要导入一个Excel模板需要实现二级联动,现记录如下: 首先看一下原始数据,原始信息在一张工作表,第一行是省市名称,下面的若干行为对应省市下面的地名和区名.需要在另外一张工作表中A列和B列建立 ...
- Struts2二级菜单联动
http://www.cnblogs.com/wujixing/p/5194461.html ps: Java面试 http://blog.csdn.net/zhang070809/article/d ...
- 利用Ajax和JSON实现关于查找省市名称的二级联动功能
功能实现的思路:我们经常碰见网上购物时候填写收件地址会用到这个查找省市县的三级联动查找功能,我们可以利用Ajax和JSON技术模拟这个功能,说白了同样是使用Ajax的局部数据更新功能这个特性.因为省市 ...
- 基于jQuery+JSON的省市县 二级 三级 联动效果
省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统.电商网站最为常见.开发者一般使用Ajax实现无刷新下拉联动.本文将讲述,利用jQuery插件,通过读取JSON数据,实现无刷新动态下拉 ...
- java结合jQuery.ajax实现左右菜单联动刷新列表内容
http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
随机推荐
- Java线程间和进程间通信
1 线程与线程间通信 1.1 基本概念以及线程与进程之间的区别联系 关于进程和线程,首先从定义上理解就有所不同: 进程是具有一定独立功能的程序.它是系统进行资源分配和调度的一个独立单位,重点在系统调度 ...
- Dojo与jQuery综合比较分析
最近一直都在参与项目,无法抽空写些或者看些东西,周末抽了点时间看了下关于Dojo和Jquery的东西,在CSDN上看到一篇两个框架进行对比的文章,感觉写的不错,就拿了过来,没有别的意思,一来想保留下来 ...
- Linux 4.10.8 根文件系统制作（三）---制作yaffs文件系统
这里直接用的是韦东山提供的工具. yaffs文件系统是专门用于nandflash的文件系统 我们前面已经下载了yaffs 的源码,也做了文件系统目录的构建. 在yaffs2的源码目录中有一个utils ...
- （转）MFC界面风格
以前在XP写的程序,现在系统换成了WIN7,现在对话框在编辑和预览的时候显示都如图一所示,可实际编译生成之后的显示却如图二所示,是什么问题?如何设置两者的显示风格使其保持一致? ----------- ...
- [CERC2016]机棚障碍 Hangar Hurdles（kruskal重构树+树上倍增）
题面 \(solution:\) 某蒟蒻的心路历程: 这一题第一眼感觉很奇怪 带障碍物的图,最大的集装箱? 首先想到的就是限制我集装箱大小条件的是什么: 如果我要在某一个点上放一个集装箱且使它最大, ...
- mongodb系列~关于双活状态的mongodb集群
一简介:说说我们异地双活的集群 二 背景:需要建立异地双活的架构 三 构建 1 需要保证第二机房至少两个副本集DB,这样在第一机房挂掉后才能保证第二机房的可用性 2 集群状态下第二机房启用config ...
- dup,dup2函数【转】
转自:http://eriol.iteye.com/blog/1180624 转自:http://www.cnblogs.com/jht/archive/2006/04/04/366086.html ...
- 001_TCP/IP TIME_WAIT状态原理及监控实战
一.原理 <1>TIME_WAIT状态原理---------------------------- 通信双方建立TCP连接后,主动关闭连接的一方就会进入TIME_WAIT状态. 客户端主动 ...
- Bootstrap报错：Bootstrap's JavaScript requires jQuery
如题,经百度原来导入顺序的问题,须要先导入Jqeury库,今记之!
- Expm 7_2区间调度问题
[问题描述] 给定n个活动,其中的每个活动ai包含一个起始时间si与结束时间fi.设计与实现算法从n个活动中找出一个最大的相互兼容的活动子集S. 要求:分别设计动态规划与贪心算法求解该问题.其中,对贪 ...