jqueryの+ Ajaxの3つのリンケージ・メニュー(mysqlの+ SM +アヤックス)

三のリンケージ・メニュー(mysqlの+ SM +アヤックス)

具体的なアイデア

1.輸入のMySQLにデータベース内のすべてのデータ

2.テーブルとテーブルの間の関係を識別

3.すべての州を披露

前記コードは、選択された省によって対応する州の都市を取得します

5.都市コードの対応エリアをチェックして街を取得します

北京に対応する前記初期化データ

7.地域を変更する場合は、変更に対応する都市、第2の領域は、対応する初期化都市を持っています

  1. テーブルを作成するには

  2. 内蔵エンティティ

  3. ダオ

    すべての州を発見

  4. マッパーファイルを作成します。

  5. 設定ファイルを作成します。

    インポートMySQLドライバのJAR

    jdbc.properties

    ドライバ=はcom.mysql.jdbc.Driver

    URL = JDBCます。mysql:// localhostを:3306 /データベース名

    ユーザ名=ルート

    パスワード=ルート

  6. サービス

  7. アクション

  8. 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>

おすすめ

転載: blog.csdn.net/JiangLi_/article/details/93771999