三级联动(教学篇)仅供参考
时间:2019-02-16
本文章向大家介绍三级联动(教学篇)仅供参考,主要包括三级联动(教学篇)仅供参考使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jsp页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'test.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$.post(
"city/first",
function(data){
var tempArr="";
if(data!=""){
for(var i=0;i<data.length;i++){
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#province").append(tempArr);
}
},
"json"
);
$("#province").change(function(){
var pId=$(this).val();
getCitys(pId);
});
$("#city").change(function(){
var cId=$(this).val();
getAreas(cId);
});
getCitys(110000);
getAreas(110100);
});
//-----------------------------------
function getCitys(pId){
$.post(
"city/second",
{provinceId:pId},
function(data){
var tempArr="";
if(data!=""){
$("#city").empty();
for(var i=0;i<data.length;i++){
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#city").append(tempArr);
getCitys(data[0].code);
}
},
"json"
);
}
//-----------------------------
function getAreas(cId){
$.post(
"city/third",
{cityId:cId},
function(data){
var tempArr="";
if(data!=""){
$("#area").empty();
for(var i=0;i<data.length;i++){
tempArr+="<option value='"+data[i].code+"'>"+data[i].name+"</option>";
}
$("#area").append(tempArr);
getAreas(data[0].code);
}
},
"json"
);
}
</script>
</head>
<body>
<center>
<table>
<tr>
<td>选择省:</td>
<td><select id="province"></select></td>
</tr>
<tr>
<td>选择市:</td>
<td><select id="city"></select></td>
</tr>
<tr>
<td>选择区:</td>
<td><select id="area"></select></td>
</tr>
</table>
</center>
</body>
</body>
</html>
dao层代码:
package com.aaa.dao;
import java.util.List;
import java.util.Map;
public interface CityDao {
/**
* 得到省
*/
List<Map<String,Object>> getAllProvince();
/**
* 得到市
*/
List<Map<String, Object>> getCitysByProvinceId(int provinceId);
/**
* 得到区
*/
List<Map<String, Object>> getAreasByCityId(int cityId);
}
daoImpl代码:
package com.aaa.dao;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Repository;
import com.aaa.util.BaseDao;
@Repository
public class CityDaoImpl implements CityDao{
public List<Map<String, Object>> getAllProvince() {
// TODO Auto-generated method stub
return BaseDao.selectMap("select id,code,name from province", null);
}
public List<Map<String, Object>> getCitysByProvinceId(int provinceId) {
// TODO Auto-generated method stub
return BaseDao.selectMap("select id,code,name,provincecode from city where provincecode=?", new Object[]{provinceId});
}
public List<Map<String, Object>> getAreasByCityId(int cityId) {
// TODO Auto-generated method stub
return BaseDao.selectMap("select id,code,name,citycode from area where citycode=?", new Object[]{cityId});
}
}
service层代码:
package com.aaa.service;
import java.util.List;
import java.util.Map;
public interface CityService {
/**
* 得到省
*/
List<Map<String,Object>> getAllProvince();
/**
* 得到市
*/
List<Map<String, Object>> getCitysByProvinceId(int provinceId);
/**
* 得到区
*/
List<Map<String, Object>> getAreasByCityId(int cityId);
}
serviceImpl代码:
package com.aaa.service;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.aaa.dao.CityDao;
@Service
public class CityServiceImpl implements CityService{
@Autowired
private CityDao cityDao;
public List<Map<String, Object>> getAllProvince() {
// TODO Auto-generated method stub
return cityDao.getAllProvince();
}
public List<Map<String, Object>> getCitysByProvinceId(int provinceId) {
// TODO Auto-generated method stub
return cityDao.getCitysByProvinceId(provinceId);
}
public List<Map<String, Object>> getAreasByCityId(int cityId) {
// TODO Auto-generated method stub
return cityDao.getAreasByCityId(cityId);
}
}
controller代码:
@Controller
@RequestMapping("/city")
public class CityController {
@Autowired
private CityService cityService;
@ResponseBody
@RequestMapping("/first")
public List<Map<String,Object>> province(){
List<Map<String, Object>> allProvince=cityService.getAllProvince();
return allProvince;
}
@ResponseBody
@RequestMapping("/second")
public List<Map<String,Object>> city(Model model,Integer provinceId){
List<Map<String, Object>> allCity=cityService.getCitysByProvinceId(provinceId);
System.out.println(allCity);
System.out.println(provinceId);
return allCity;
}
@ResponseBody
@RequestMapping("/third")
public List<Map<String,Object>> area(Model model,Integer cityId){
List<Map<String, Object>> allArea=cityService.getAreasByCityId(cityId);
return allArea;
}
}
- 关于导入导出sequence(r4笔记第11天)
- Spring+SpringMVC+MyBatis整合进阶篇(四)RESTful实战(前端代码修改)
- Nodejs cluster模块深入探究
- org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression
- 巧用分析函数循序渐进解决实际问题 (r4笔记第10天)
- 支持多用户web终端实现及安全保障(nodejs)
- 你看到的最直白清晰的CNN讲解
- oracle中的数组(第一篇)(r4笔记第9天)
- org.springframework.expression.spel.SpelEvaluationException: EL1004E: Method call: Method service()
- GITCHAT系列2:个性化推荐
- org.springframework.expression.spel.SpelEvaluationException: EL1011E: Method call: Attempted to call
- 【Keras】完整实现‘交通标志’分类、‘票据’分类两个项目,让你掌握深度学习图像分类
- PaddlePaddle发布新版API,简化深度学习编程
- 13(01)总结StringBuffer,StringBuilder,数组高级,Arrays,Integer,Character
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL一个字符集转换的骚操作,酿下性能的苦果
- CentOS7下部署Cobbler实现PXE+Kickstart自动化安装【脚本版】
- 腾讯云主机上部署FRP+Teamviewer穿透内网进行远程运维
- 从今天起构建你的JavaScript世界
- SpringCloud开发框架入门知识
- 一张900w的数据表,怎么把原先要花费17s执行的SQL优化到300ms?
- Codeforces Round #624 (Div. 3) A - Add Odd or Subtract Even
- XMLHttpRequest
- Codeforces Round #624 (Div. 3) B - WeirdSort
- 详解 Ajax
- 这个腾讯博客是被腾讯爬虫爬过来的,样式丑,请看我博客园地址,见下文
- Codeforces Round #624 (Div. 3) C - Perform the Combo
- 都是微服务的天下了,还有不知道 JSON 的程序员吗?
- Codeforces Round #624 (Div. 3) D.Three Integers
- select 高级查询之连接查询