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请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...
随机推荐
- 使用rownum对oracle分页【原】
以Student表为例进行分页 建表及插入 -- 有表结构如下 create table STUDENT ( sno INTEGER, sname ), sage INTEGER ); -- 插入数据 ...
- IdeaVim-常用操作
IdeaVim简介 IdeaVim是IntelliJ IDEA的一款插件,他提高了我们写代码的速度,对代码的跳转,查找也很友好. 安装位置 安装之后它在 Tools > Vim Emulator ...
- cdqz2017-test8-Tree（点分树）
n个点的带点权带边权的树,设点权为a[i],边权为b[i] 一棵树有n*(n-1)/2个点对, 定义这棵树的价值为任意两点对的(a[x]^a[y])*dis(x,y) 有m次修改一个点的点权的操作 输 ...
- Nginx管理脚本
#!/bin/bash # chkconfig: # description: Start/Stop Nginx server path=/application/nginx/sbin pid=/ap ...
- C#检测鼠标移动消息
当C#窗口上有其它控件时,窗口本身检测不到消息.1.使用WndProc.MouseMove不行,比如 protected override void WndProc(ref Message m) { ...
- IDA Pro使用技巧
DA Pro基本简介 IDA加载完程序后,3个立即可见的窗口分别为IDA-View,Named,和消息输出窗口(output Window). IDA图形视图会有执行流,Yes箭头默认为绿色,No箭头 ...
- slice() 和splice()
splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改. 1, splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目. splice ...
- HDU4738 Caocao's Bridges【强连通】
题意: 曹操有N个岛,这些岛用M座桥连接起来,每座桥有士兵把守(也可能没有),周瑜想让这N个岛不连通,但只能炸掉一座桥,并且炸掉一座桥需要派出不小于守桥士兵数的人去,桥的守兵数为0时,也需要派出一个人 ...
- 出现fonts/fontawesome-webfont.woff?v=4.5.0 net::ERR_ABORTED
虽然网页正常显示和运行,但是有2个字体文件出现404错误. 原因:服务器没有配置MIME类型而已. 1. 在IIS网站中,找打网站对应的MIME类型,双击. 2.能看到此网站对应的MIME类型,点击右 ...
- 分享一款Markdown的css样式
使用 本样式在这个样式的基础上做了一些修改, 主要是对于表格和代码块以及一些细节的修改. 主要目的是用在chrome的扩展 Markdown Preview Plus中, 替换其内置的样式. 由于 M ...