

jsp文件:
m.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>html5 canvasé¦å±èªéåºèæ¯å¨ç»å¾ªç¯ææä»£ç </title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--å¿è¦æ ·å¼-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--
引入jQuery文件
-->
<script type="text/javascript" src="js/msk.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
//页面加载成功请求省的信息
$(function(){
//发起ajax请求,请求所有的省信息
$.get("area",{parentid:0},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//将响应省数据填充到省下拉框中
//获取下拉框对象
var sel=$("#pre");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
//填充
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//触发省下拉框的change事件
$("#pre").trigger("change");
});
//页面加载成功给省下拉框添加onchange事件
$("#pre").change(function(){
//获取当前选择的省的areaid
var areaid=$("#pre").val();
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#city");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#city").trigger("change");
})
});
//页面加载成功给市下拉框添加onchange事件
$("#city").change(function(){
//获取当前选择的市的areaid
var areaid=$("#city").val();
//发起ajax请求,请求当前市下的区/县信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#town");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
})
})
//封装公共方法
function getData(areaid,sid){
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#"+sid);
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#"+sid).trigger("change");
})
}
})
</script>
<embed src="mp3/msk.mp3" loop="0" autostar="true"hidden="true"/>
</head>
<body>
<div class="container demo-1">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">
省:<select name="" id="pre" style="width:150px;height:30px;"></select>
市:<select name="" id="city" style="width:150px;height:30px;"></select>
区/县:<select name="" id="town" style="width:150px;height:30px;"></select>
</div>
<nav class="codrops-demos">
<a class="current-demo" href="m.jsp">Demo 1</a>
<a href="song.jsp">Demo 2</a>
<a href="sel.jsp">Demo 3</a>
<a href="kai.jsp">Demo 4</a>
</nav>
</div>
</div><!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-1.js"></script>
</body>
</html>
<audio autoplay="true" controls="true" loop:true">
<source src="mp3/msk.mp3" type='audio/ogg'>
<source src="mp3/msk.mp3" type='audio/mpeg'>
</audio>sel.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<embed src="mp3/msk.mp3" loop="0" autostar="true"hidden="true"/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Background Headers | Demo 3</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--
引入jQuery文件
-->
<script type="text/javascript" src="js/msk.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
//页面加载成功请求省的信息
$(function(){
//发起ajax请求,请求所有的省信息
$.get("area",{parentid:0},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//将响应省数据填充到省下拉框中
//获取下拉框对象
var sel=$("#pre");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
//填充
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//触发省下拉框的change事件
$("#pre").trigger("change");
});
//页面加载成功给省下拉框添加onchange事件
$("#pre").change(function(){
//获取当前选择的省的areaid
var areaid=$("#pre").val();
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#city");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#city").trigger("change");
})
});
//页面加载成功给市下拉框添加onchange事件
$("#city").change(function(){
//获取当前选择的市的areaid
var areaid=$("#city").val();
//发起ajax请求,请求当前市下的区/县信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#town");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
})
})
//封装公共方法
function getData(areaid,sid){
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#"+sid);
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#"+sid).trigger("change");
})
}
})
</script>
</head>
<!--
ajax案例之三级联动 :
功能需求:
页面有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县,下拉框中
出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+jdbc
需求分析(思路):
1.创建页面 :页面中有三个下拉框,分别为省,市,区/县
2.页面加载 成功发起ajax请求,请求省信息,并将响应结果填充到省下拉框中
3.选择省触发为一个新的js函数的执行,该函数中发起新的ajax请求,请求该省下的市信息,
并将响应数据填充到市下拉框
4.选择市信息触发一个新的js函数的执行该函数中发起新的ajax请求,
请求该市下的区/县信息,并将数据填充到区/县下拉框中
数据库设计:
创建表(area):存储了省,市,区/县信息
设计表实现一:只存储了数据,但是数据之间的层级关系没有存储.
地区id:areaid
地区名:areaname
设计表实现二:
地区id:areaid
地区名areaname
地区上级id:parentid
sql语句设计:
查询所有省信息:
select *from area where parentid=0;
查询选择省的市信息(假如:选择的山东省的areaid为110000,)
select * from area where parentid=110000;
查询选择的市的区/县信息(假如:选择的山东省的济南市areaid为110001)
select * from area where parentid=110001;
代码中
select * from area where parentid=?;
数据库的实现:
将资料中的提供的area.sql文件导入到数据库中即可
功能实现:
参照源码即可
代码缺陷:
发现请求省,市,县的代码中基本上是一致的。代码的冗余量有点大
解决:
考虑使用封装
实现:形同的保留,不同的传参。具体参照源码
-->
<body>
<div class="container demo-3">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">
省:<select name="" id="pre" style="width:150px;height:30px;"></select>
市:<select name="" id="city" style="width:150px;height:30px;"></select>
区/县:<select name="" id="town" style="width:150px;height:30px;"></select>
</span></h1>
</div>
<nav class="codrops-demos">
<a href="m.jsp">Demo 1</a>
<a href="song.jsp">Demo 2</a>
<a class="current-demo" href="sel.jsp">Demo 3</a>
<a href="kai.jsp">Demo 4</a>
</nav>
</div>
</div><!-- /container -->
<script src="js/TweenLite.min.js"></script>
<script src="js/EasePack.min.js"></script>
<script src="js/rAF.js"></script>
<script src="js/demo-3.js"></script>
</body>
</html>
<audio autoplay="true" controls="true" loop:true">
<source src="mp3/msk.mp3" type='audio/ogg'>
<source src="mp3/msk.mp3" type='audio/mpeg'>
</audio>song.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<embed src="mp3/msk.mp3" loop="0" autostar="true"hidden="true"/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Background Headers | Demo 2</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--
引入jQuery文件
-->
<script type="text/javascript" src="js/msk.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
//页面加载成功请求省的信息
$(function(){
//发起ajax请求,请求所有的省信息
$.get("area",{parentid:0},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//将响应省数据填充到省下拉框中
//获取下拉框对象
var sel=$("#pre");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
//填充
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//触发省下拉框的change事件
$("#pre").trigger("change");
});
//页面加载成功给省下拉框添加onchange事件
$("#pre").change(function(){
//获取当前选择的省的areaid
var areaid=$("#pre").val();
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#city");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#city").trigger("change");
})
});
//页面加载成功给市下拉框添加onchange事件
$("#city").change(function(){
//获取当前选择的市的areaid
var areaid=$("#city").val();
//发起ajax请求,请求当前市下的区/县信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#town");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
})
})
//封装公共方法
function getData(areaid,sid){
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#"+sid);
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#"+sid).trigger("change");
})
}
})
</script>
</script>
</head>
<body>
<div class="container demo-2">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">
省:<select name="" id="pre" style="width:150px;height:30px;"></select>
市:<select name="" id="city" style="width:150px;height:30px;"></select>
区/县:<select name="" id="town" style="width:150px;height:30px;"></select>
</span></h1>
</div>
<nav class="codrops-demos">
<a href="m.jsp">Demo 1</a>
<a class="current-demo" href="song.jsp">Demo 2</a>
<a href="sel.jsp">Demo 3</a>
<a href="kai.jsp">Demo 4</a>
</nav>
<audio autoplay="true" controls="true" loop:true">
<source src="mp3/msk.mp3" type='audio/ogg'>
<source src="mp3/msk.mp3" type='audio/mpeg'>
</audio>
</div>
</div><!-- /container -->
<script src="js/rAF.js"></script>
<script src="js/demo-2.js"></script>
</body>
</html>kai.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Animated Background Headers | Demo 4</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
<!--
引入jQuery文件
-->
<script type="text/javascript" src="js/msk.js"></script>
<!--声明js代码域 -->
<script type="text/javascript">
//页面加载成功请求省的信息
$(function(){
//发起ajax请求,请求所有的省信息
$.get("area",{parentid:0},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//将响应省数据填充到省下拉框中
//获取下拉框对象
var sel=$("#pre");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
//填充
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//触发省下拉框的change事件
$("#pre").trigger("change");
});
//页面加载成功给省下拉框添加onchange事件
$("#pre").change(function(){
//获取当前选择的省的areaid
var areaid=$("#pre").val();
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#city");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#city").trigger("change");
})
});
//页面加载成功给市下拉框添加onchange事件
$("#city").change(function(){
//获取当前选择的市的areaid
var areaid=$("#city").val();
//发起ajax请求,请求当前市下的区/县信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#town");
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
})
})
//封装公共方法
function getData(areaid,sid){
//发起ajax请求,请求当前省的市信息
$.get("area",{parentid:areaid},function(data){
//使用eval方法将数据转换为js对象
eval("var areas="+data);
//获取下拉框对象
var sel=$("#"+sid);
//清空原有内容
sel.empty();
//遍历
for(var i=0;i<areas.length;i++){
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
}
//触发省下拉框的change事件
$("#"+sid).trigger("change");
})
}
})
</script>
<style type="text/css">
<audio autoplay="autoplay" controls="controls" loop=true>
<source src="mp3/msk.mp3" type='audio/ogg'>
<source src="mp3/msk.mp3" type='audio/mpeg'>
</audio>
</style>
</head>
<body>
<div class="container demo-4">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<h1 class="main-title">
省:<select name="" id="pre" style="width:150px;height:30px;"></select>
市:<select name="" id="city" style="width:150px;height:30px;"></select>
区/县:<select name="" id="town" style="width:150px;height:30px;"></select>
</span></h1>
</div>
<nav class="codrops-demos">
<a href="m.jsp">Demo 1</a>
<a href="song.jsp">Demo 2</a>
<a href="sel.jsp">Demo 3</a>
<a class="current-demo" href="kai.jsp">Demo 4</a>
</nav>
</div>
<embed src="mp3/msk.mp3" hidden=true autostart=true loop=true></embed>
</div><!-- /container -->
<script src="js/rAF.js"></script>
<script src="js/demo-4.js"></script>
</body>
</html>
<audio autoplay="true" controls="true" loop:true">
<source src="mp3/msk.mp3" type='audio/ogg'>
<source src="mp3/msk.mp3" type='audio/mpeg'>
</audio>具体的太多了,有需要的,
可以加我QQ:1563166974

被折叠的 条评论
为什么被折叠?



