清空div中的内容而不刷新整个页面_三级联动+前端动态页面

67189e6dd1b707f2459044f66ac467df.png
196721ec957d66877fe8cd555b84baa7.png
https://www.zhihu.com/video/1099097301758455808

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值