Three linkage menu (mysql + SM + Ajax)
Specific ideas
1. import all data in the database to mysql
2. distinguish the relationship between the table and the table
3. showcase all provinces
4. code to obtain the corresponding province city by selected provinces
5. Obtain the city by checking the corresponding area of the city code
6. initialization data corresponding to Beijing
7. When changing province, city corresponding to the change, and a second area have a corresponding initialization City
-
To build the table
-
Built entity
-
Dao
Discover all provinces
-
Create a mapper file
-
Create a config file
Import mysql driver jar
jdbc.properties
driver=com.mysql.jdbc.driver
url = jdbc: mysql: // localhost: 3306 / database name
username=root
password=root
-
service
-
action
-
jsp
<html>
<head>
<script 引入Jquery文件>
</script>
<script>
//加载页面执行
$(function(){
$.ajax({
url:"后台响应路径",
type:"请求类型GET",
dataType:"json",
success:function(provinces){
for(var i= 0 ; i< provinces.length;i++){
var option = $("<option value="+provinces[i].code+">"+provinces[i].name+"</option>");
$("#province").append(option);
}
})
});
//给第一个下拉框添加change事件
$("#province").change(function(){
//获取选中的省份的code
var code = $("# province option:selected").val();
$.ajax({
url:"${path}/city/showCitys",
type:"GET",
data:"provincecode="+code,//把省份的code传入City表中
dataType:"json",
success:function(citys){
for(var i = 0 ; i<citys.length;i++){
//每次清空
$("#city").empty();
var option = $("<option value="+citys[i].code+">"+citys[i].name+"</option>");
$("#city").append(option);
}
}
})
});
$("#city").change(function(){
//获取选中的市的code
var code = $("#city option:selected").val();
$.ajax({
url:"${path}/area/showAreasByCityCode",
type:"GET",
data:"citycode="+code,
datatType:"json",
success:function(areas){
for(var i= 0 ; i<areas.length;i++)
$(#area).empty();
var option = $("<option>"+areas[i].name+"</option>")
$("#area").append(option);
}
})
});
</script>
</head>
<body>
<select id="province">
</select>
<select id="city">
</select>
<select id="area">
</select>
</body>
</html>