三のリンケージ・メニュー(mysqlの+ SM +アヤックス)
具体的なアイデア
1.輸入のMySQLにデータベース内のすべてのデータ
2.テーブルとテーブルの間の関係を識別
3.すべての州を披露
前記コードは、選択された省によって対応する州の都市を取得します
5.都市コードの対応エリアをチェックして街を取得します
北京に対応する前記初期化データ
7.地域を変更する場合は、変更に対応する都市、第2の領域は、対応する初期化都市を持っています
-
テーブルを作成するには
-
内蔵エンティティ
-
ダオ
すべての州を発見
-
マッパーファイルを作成します。
-
設定ファイルを作成します。
インポートMySQLドライバのJAR
jdbc.properties
ドライバ=はcom.mysql.jdbc.Driver
URL = JDBCます。mysql:// localhostを:3306 /データベース名
ユーザ名=ルート
パスワード=ルート
-
サービス
-
アクション
-
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>