省市级关联

Posted 2020-09-29 城管也会敲代码

需求：在两个下拉框，第一个是省份，第二个是市，选择省份，自动获取省份所在的市。（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配置文件，学过的人应该都会简单配置