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. java.awt:提供了绘图和图像类,主要用于编写GUI程序,包括按钮.标签等常用组件以及相应的事件类. 2. java.lang:java的语言包,是核心包,默认导入到用户程序,包中有obje ...
- 支付宝app支付流程
- 在html中控制自动换行
其实只要在表格控制中添加一句<td style="word-break:break-all">就搞定了.其中可能对英文换行可能会分开一个单词问题:解决如下:语法: ...
- CF1066D Boxes Packing
传送门 这题为什么要用二分呢?/huaji 首先可以\(O(n)\)预处理出从某个物品\(i\)开始放,只放一个盒子,能放的最后物品的位置\(j\),只要用两个指针维护左右端点,每次移动一下左端点同时 ...
- Error: Cannot find module PhantomJS
node install.js Considering PhantomJS found at /usr/local/bin/phantomjs Looks like an `npm install - ...
- [JXOI2018]游戏 （线性筛，数论）
[JXOI2018]游戏 \(solution:\) 这一道题的原版题面实在太负能量了,所以用了修改版题面. 这道题只要仔细读题,我们就可以将题目的一些基本性质分析出来:首先我们定义:对于某一类都可以 ...
- R 的农场 chebnear （二分答案+最近平面点对）
题面 \(solution:\) 这道题想到二分答案应该是不难的,因为题目是求平均工资的最小值,这个显然具备单调性: 我们设平均工资的最小值为ans,如果我们现在的平均工资x小于ans那么将x带入题目 ...
- Django 2.0 学习(12)：Django 模板语法
Django 模板语法 一.模板 只要是在html里面有模板语法就不是html文件了,这样的文件就叫做模板. 二.模板语法 模板语法变量:{{ }} 在Django模板中遍历复杂数据结构的关键是句点字 ...
- mysql 原理 ~ 二阶段提交协议通说
一 简介: 今天是第二篇,讲解的是mysql的事务日志 二 具体 1 WAL技术(先写日志,再写磁盘) 2 binlog redolog 二阶段提交协议 目的 保持 redo log和binl ...
- 基于Python的机器学习实战：AadBoost
目录: 1. Boosting方法的简介 2. AdaBoost算法 3.基于单层决策树构建弱分类器 4.完整的AdaBoost的算法实现 5.总结 1. Boosting方法的简介 返回目录 Boo ...