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