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 动态代理学习记录
打算用JAVA实现一个简单的RPC框架,看完RPC参考代码之后,感觉RPC的实现主要用到了两个方面的JAVA知识:网络通信和动态代理.因此,先补补动态代理的知识.---多看看代码中写的注释 参考:Ja ...
- Kettle基本概念学习
一,理解开发环境与生产环境. 比如,在windows或mac下设计好流程之后,把该设计文件上传到linux集群的机器上执行.那么,在windows下进行的工作即为开发环境,任务具体在linxu机器上执 ...
- JS简史
一.产生背景 1)在JavaScript问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值: 2)为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负 ...
- 无线DOS攻击
1.无线连接状态 IEEE 802.11定义了一种客户端状态机制,用于跟踪工作站身份验证和关联状态.无线客户端和AP基于IEEE标准实现这种状态机制.成功关联的客户站停留在状态3,才能进行无线通信.处 ...
- collocation
a collocation is two or more words that often go together. These combination just sound "right& ...
- BZOJ:1816 [Cqoi2010]扑克牌 （贪心或二分答案）
题面 \(solution:\) 这道题难就难在你能否读懂题目的意思,我们将它翻译一下: 现在我有n根竹子(每根竹子有\(c_i\)节,每节竹子高度为1),我可以通过消耗一点法力值使某一根竹子的某两节 ...
- python的__mro__与__slot__
class A(object): def __init__(self): print ' -> Enter A' print ' <- Leave A' class B(A): def _ ...
- SpringBoot启动方式讲解和部署war项目到tomcat9
1.SpringBoot启动方式讲解和部署war项目到tomcat9简介:SpringBoot常见启动方式讲解和部署war项目Tomcat 1.ide启动 2.jar包方式启动 maven插件: &l ...
- 论文笔记系列-Neural Architecture Search With Reinforcement Learning
摘要 神经网络在多个领域都取得了不错的成绩,但是神经网络的合理设计却是比较困难的.在本篇论文中,作者使用 递归网络去省城神经网络的模型描述,并且使用 增强学习训练RNN,以使得生成得到的模型在验证集上 ...
- 【转】Python之xml文档及配置文件处理（ElementTree模块、ConfigParser模块）
[转]Python之xml文档及配置文件处理(ElementTree模块.ConfigParser模块) 本节内容 前言 XML处理模块 ConfigParser/configparser模块 总结 ...