文档章节

2.小实例:二级菜单联动

F
 Favour
发布于 2016/08/11 17:28
字数 518
阅读 12
收藏 0
点赞 0
评论 0
<%@ 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>Insert title here</title>
<script type="text/javascript">
	function loadInfo(){
		var shengId=document.getElementById("sheng").value;
		shi.options.length=0;  // 删除所有市下拉框的选项
		var xmlHttp;
		if(window.XMLHttpRequest){
			xmlHttp=new XMLHttpRequest();
		}else{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState==4 && xmlHttp.status==200){
				alert(xmlHttp.responseText);
				var dataObj=eval("("+xmlHttp.responseText+")");
				for(var i=0;i<dataObj.rows.length;i++){
					var o=dataObj.rows[i];
					shi.options.add(new Option(o.text,o.id));
				}
			}
		};
		xmlHttp.open("get", "GetAjaxInfoServlet?action=ejld&shengId="+shengId, true);
		
	    xmlHttp.send();
	}
</script>
</head>
<body>
省:
<select id="sheng" onchange="loadInfo()">
	<option value="1">江苏省</option>
	<option value="2">山东省</option>
	<option value="3">浙江省</option>
</select>
&nbsp;&nbsp;
市
<select id="shi">
</select>
</body>
</html>

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>GetAjaxInfoServlet</servlet-name>
    <servlet-class>web.GetAjaxInfoServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>GetAjaxInfoServlet</servlet-name>
    <url-pattern>/GetAjaxInfoServlet</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
package web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet 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 {
		response.setContentType("text/html;charset=utf-8");
		String action=request.getParameter("action");
		if("checkUserName".equals(action)){
			this.checkUserName(request, response);
		}else if("ejld".equals(action)){
			this.ejld(request, response);
		}
		
	}

	
	private void checkUserName(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out=response.getWriter();
		String userName=request.getParameter("userName");
		JSONObject resultJson=new JSONObject();
		if("jack".equals(userName)){
			resultJson.put("exist", true);
		}else{
			resultJson.put("exist", false);
		}
		out.println(resultJson);
		out.flush();
		out.close();
	}
	
	private void ejld(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out=response.getWriter();
		String shengId=request.getParameter("shengId");
		JSONObject resultJson=new JSONObject();
		JSONArray jsonArray=new JSONArray();
		JSONObject temp=null;
		switch(Integer.parseInt(shengId)){
			case 1:{
				temp=new JSONObject();temp.put("id", 1);temp.put("text", "南京");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 2);temp.put("text", "南通");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 3);temp.put("text", "泰兴");jsonArray.add(temp);
				break;
			}
			case 2:{
				temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
				break;
			}
			case 3:{
				temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
				temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
				break;
			}
		}
		resultJson.put("rows", jsonArray);
		out.println(resultJson);
		out.flush();
		out.close();
	}
	
}

 

© 著作权归作者所有

共有 人打赏支持
F
粉丝 4
博文 185
码字总数 96673
作品 0
成都
程序员
关于网站二级联动菜单前台不能正常显示的问题

在做网站的时候遇到一个二级联动菜单不显示的问题,我是想用css直接控制二级导航菜单,但是二级菜单不能现实,下边是二级联动菜单的html部分: <div class="menu"><ul class="wrapper"> <di...

肖登天 ⋅ 2013/02/27 ⋅ 1

ajax 动态生成二级联动下拉列表

无限级二级菜单,越来越多的被应用,譬如省级->市级的二级菜单 思路:一级下拉列表select 绑定一个id, jqury获取到该下拉列表的checked属性值,通过ajax请求获取到该值所对应的二级内容,然...

喜欢敲代码的感觉 ⋅ 2014/10/28 ⋅ 0

Struts2+Jquery+json如何实现第二级菜单的加载回填?

我在页面加载时候加载第一集联动菜单,并且实现了第一及省份菜单的回填(就是默认选中库中该用户的所属省份),但是省份关联的第二级城市菜单是用Jquery.post()实现联动的,这个怎么实现回填...

飞翔的单车 ⋅ 2012/02/26 ⋅ 1

怎么在Django 添加省市二级联动下拉列表?

如何在Django Admin后台添加一个省市二级联动下拉列表? models.py里怎么定义?  我想在前台选择发布信息的时候。出现一个省-市二级选择菜单。这效果怎么实现? 有什么现成的app吗?...

gq2018 ⋅ 2014/08/24 ⋅ 3

基于 mpvue 框架的小程序选择组件,支持单列,多列,级联

mpvue-picker 前言 在 mpvue开源之初写了 用 vue 写小程序,基于 mpvue 框架重写 weui。当时用的是小程序的原生组件,没有对其进行封装和组件化。而对于现在的前端开发环境,,,以及已经是一...

KuangPF ⋅ 05/14 ⋅ 0

jquery带有参照数据的效果处理

几个简单小例子: 1.入门二级联动 2.二级联动 3.三级联动 4.简繁体转换 5.简单答题 6.创建课程表模板 这些例子有个共同的原理,就是有一个写好的参考数据模型,通过这个参考处理!什么参考,...

透笔度 ⋅ 2015/09/18 ⋅ 0

简单的Select联动菜单代码

这篇文章主要介绍了js实现简单的联动菜单效果,涉及javascript针对页面元素的遍历、读取及设置技巧 本文实例讲述了js实现简单的联动菜单效果。分享给大家供大家参考。具体如下: 这是一个最简...

hhj187 ⋅ 2016/08/22 ⋅ 0

小博老师解析Java核心技术 ——JSwing高级菜单制作

[引言] 我们在学习Java编程的时候,如果需要开发客户端窗体类型的程序,可以使用JDK中的awt和swing库。本文开始小博老师就继续为大家演示Java窗体编程中的菜单栏制作,今天主要讲解的菜单栏中...

博为峰教研组 ⋅ 2016/12/26 ⋅ 0

POSCMS V3.2.14 发布,跨平台网站内容管理系统

一、新增内容 升级ci框架到国际版最新v3.1.6 增加联动菜单自定义字段功能 增加关键词库自定义字段功能 增加对移动端真静态化的支持 增加数据优化插件(VIP5000版) 增加手动生成附件缓存功能...

天睿云计算 ⋅ 05/11 ⋅ 0

省市二级联动菜单改进

今天在用到了省市菜单二级联动,在网上找了一个代码例子,但是不是我想要的,初始的时候还可以如图: 但是如果数据库中有值了,它还是这样显示,那就有点不合常规了.需要是这样的 tool.js代码: fun...

cookqq ⋅ 2012/02/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Python爬虫,抓取淘宝商品评论内容

作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿“德州扒鸡”...

python玩家 ⋅ 3分钟前 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

java高级架构牛人 ⋅ 26分钟前 ⋅ 0

用户登录信息-钉子效果(基于jquery2.0)

本js效果使用jquery2.0,清晰的分解用户登录信息的(钉子效果),该效果直接用在作者网站(www.phpkhbd.com)上。 里面的难点有:定时器,延时。 大致效果如下: 一开始: 鼠标放上去的时候:...

宁哥实战课堂 ⋅ 27分钟前 ⋅ 0

解决yum安装报错Protected multilib versions

使用yum安装报错Protected multilib versions原因是因为多个库不能共存,不过更新的话也并不行,但是可以在安装命令后面加上如下一段命令: --setopt=protected_multilib=false 案例: 比如需...

北岩 ⋅ 38分钟前 ⋅ 0

为什么要学习Typescript???

简单来说 目前的typescript就是未来的javascript 为什么?? 这要从ECMA-262标准的第4版说起 对了 我们说的ES5 其实是ECMAScript3.1这个替代性建议被扶正了而已... 那么 第4版标准是什么? 看看...

hang1989 ⋅ 43分钟前 ⋅ 0

linux安装ipfs

一、下载ipfs # cd /usr/local/ipfs/ # wget https://dist.ipfs.io/go-ipfs/v0.4.15/go-ipfs_v0.4.15_linux-amd64.tar.gz # tar -zxvf go-ipfs_v0.4.15_linux-amd64.tar.gz 二、安装ipfs # ......

八戒八戒八戒 ⋅ 48分钟前 ⋅ 0

jvm程序执行慢诊断手册

生产环境最多的几种事故之一就是程序执行慢,如果是web服务的话,表现就是响应时间长。本文分享,从业多年形成的排查守则。 诊断步骤 系统资源查看 首先是系统资源查看,而且必须是在第一步。...

xpbob ⋅ 49分钟前 ⋅ 0

YII2 advanced 高级版本项目搭建-添加API应用以及多应用

一、YII安裝 安裝yii可以用composer安裝,也可以在yii中文社区下载归档文件安装 composer安装就不介绍了,因为要安装composer,比较麻烦,当然安装了composer是最好的,以后安装yii的插件要用...

botkenni ⋅ 49分钟前 ⋅ 0

在jdk1.8的环境下模拟永久代内存溢出

相信不少小伙伴在看深入理解Java虚拟机的时候,作者给我们举例一个demo来发生PermGen space 1、通过List不断添加String.intern(); 2、通过设置对应的-XX:PermSize与-XX:MaxPermSize(更快看到...

虾几把写 ⋅ 今天 ⋅ 0

开发OpenDaylight组件的完整流程

在前面介绍学习了OpenDaylight的几个重要模块后,这里再来介绍下完整开发一个模块的过程。 OSGI的bundles提供被其他OSGI组件调用的服务。这个教程中展示的是Data Packet Service去解析数据包...

wangxuwei ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部