zoukankan      html  css  js  c++  java
  • 省市级关联

    需求:在两个下拉框,第一个是省份,第二个是市,选择省份,自动获取省份所在的市。(ajax技术)

    ajax:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。

    1.首先创建

    省(province)表,市(city)表,通过外键关联起来,添加少许数据,sql语句如下:

    1.省(province)表

    DROP TABLE IF EXISTS `province`;
    CREATE TABLE `province` (
      `id` int(11) NOT NULL auto_increment,
      `provinceName` varchar(32) default NULL,
      PRIMARY KEY  (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

    -- ----------------------------
    -- Records of province
    -- ----------------------------
    INSERT INTO `province` VALUES ('1', '北京省');
    INSERT INTO `province` VALUES ('2', '山东省');
    INSERT INTO `province` VALUES ('3', '河南省');

    2.市(city)表

    DROP TABLE IF EXISTS `city`;
    CREATE TABLE `city` (
      `id` int(11) NOT NULL,
      `cityName` varchar(32) default NULL,
      `provinceId` int(11) default NULL,
      PRIMARY KEY  (`id`),
      KEY `zz` (`provinceId`),
      CONSTRAINT `zz` FOREIGN KEY (`provinceId`) REFERENCES `province` (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

    -- ----------------------------
    -- Records of city
    -- ----------------------------
    INSERT INTO `city` VALUES ('1', '北京市', '1');
    INSERT INTO `city` VALUES ('2', '济南市', '2');
    INSERT INTO `city` VALUES ('3', '青岛市', '2');
    INSERT INTO `city` VALUES ('4', '郑州', '3');
    INSERT INTO `city` VALUES ('5', '洛阳', '3');

    2.jsp页面上写ajax,因为是在加载时候完成,所以代码如下

    $(function() {
            $.get("province_findProvince.action", function(data) {

                $.each(data.provinceList, function(index, element) {
                    $("#provinceId").append("<option value='"+element.id+"'>" + element.provinceName+ "</option>");
                });
            }, "json");

            $("#provinceId").change(function() {
                $("#cityId").empty();
                var id = $("#provinceId").val();      
                $.get("province_findCity.action", {"id" : id}, function(data) {
                    $.each(data.cityList,function(index,element){
                        $("#cityId").append("<option>" + element.cityName+ "</option>");
                    });                  
                }, "json");
            });
        });

            <div class="iteminfo_freprice">
                                        <div class="am-form-content address">
                                            <select  name="provinceId" id="provinceId">
                                                <option value="">请选择</option>
                                                
                                            </select>
                                            <select  name="cityId" id="cityId">
                                                <option value="">请选择</option>
                                            </select>
                                            
                                        </div>

    action:

    private ProvinceService provinceService;
        private Province province;
        private City city;
        private List<Province> provinceList;
        private List<City> cityList;
        private int id;
        //查询省份列表
        public String findProvince(){
            provinceList=provinceService.findProvice(province);
            return "success";
        }
        //查询市级列表
        public String findCity(){        
            cityList=provinceService.findCity(id);
            return "success";
        }

    set get省略。。。

    dao实现类中的方法

    private HibernateTemplate hibernateTemplate;
        @Override
        public List<Province> findProvice(Province province) {

            return hibernateTemplate.loadAll(Province.class);
        }

        @Override
        public List<City> findCity(int provinceId) {
                    
            return (List<City>) hibernateTemplate.find("select c from City c join c.province p where p.id=?", provinceId);
        }
        public void setHibernateTemplate(HibernateTemplate hibernateTemplate) {
            this.hibernateTemplate = hibernateTemplate;
        }

    action.xml配置文件:

    <!--省市级关联下拉框  -->
               <package name="dsfq" extends="json-default" namespace="/">
                   <action name="province_*" class="provinceAction" method="{1}">
                       <result type="json"></result>
                       <allowed-methods>findProvince,findCity</allowed-methods>
                   </action>
               </package>

    中间省略service层方法和spring配置文件,学过的人应该都会简单配置

  • 相关阅读:
    Codeforces Round #592 (Div. 2)C. The Football Season(暴力,循环节)
    Educational Codeforces Round 72 (Rated for Div. 2)D. Coloring Edges(想法)
    扩展KMP
    poj 1699 Best Sequence(dfs)
    KMP(思路分析)
    poj 1950 Dessert(dfs)
    poj 3278 Catch That Cow(BFS)
    素数环(回溯)
    sort与qsort
    poj 1952 buy low buy lower(DP)
  • 原文地址:https://www.cnblogs.com/lbloveab/p/7241547.html
Copyright © 2011-2022 走看看