您的位置:首页 > Web前端 > JQuery

jquery+struts2+json省市县三级联动

2016-03-13 16:48 567 查看
前台页面
<script type="text/javascript"
src="${pageContext.request.contextPath}/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//加载页面 自动读取数据库省信息
$(function() {
var url = "${pageContext.request.contextPath}/json/jsonProvince";
$.getJSON(url, function(data) {
for (var i = 0; i < data.length; i++) {
var ProvinceId = data[i].province_id;
var province = data[i].province;
$("#selectProvince").append(
"<option value='"+ProvinceId+"'>" + province
+ "</option>");
}
});
});

$(function() {
$("#selectProvince").change(function() {
var val = $(this).val();
$("#selectCity :not(:first)").remove();
$("#selectTown :not(:first)").remove();
var url = "${pageContext.request.contextPath}/json/jsonCity";
var args = {"province_id" : val};
$.getJSON(url, args, function(data) {
for (var i = 0; i < data.length; i++) {
var cityId = data[i].city_id;
var city = data[i].city;
$("#selectCity").append(
"<option value='"+cityId+"'>"
+ city + "</option>");
}
});
});

$("#selectCity").change(function() {
var val = $(this).val();
$("#selectTown :not(:first)").remove();
var url = "${pageContext.request.contextPath}/json/jsonTown";
var args = {"city_id" : val};
$.getJSON(url, args, function(data) {
for (var i = 0; i < data.length; i++) {
var townId = data[i].town_id;
var town = data[i].town;
$("#selectTown").append(
"<option value='"+townId+"'>"
+ town + "</option>");
}
});
});
});
</script>
<body>

<select id="selectProvince" name="province_id">
<option value="0">请选择。。。</option>

</select>
<select id="selectCity" name="city_id">
<option value="0">请选择。。。</option>

</select>
<select id="selectTown" name="town_id">
<option value="0">请选择。。。</option>

</select>


</body>

struts.xml

<package name="json" namespace="/json" extends="struts-default">
<action name="jsonProvince" class="com.demo.action.ProvinceAction" method="ajaxProvince"></action>
<action name="jsonCity" class="com.demo.action.ProvinceAction" method="ajaxCity"></action>
<action name="jsonTown" class="com.demo.action.ProvinceAction" method="ajaxTown"></action>

</package>
action类

@Controller
public class ProvinceAction extends ActionSupport{
@Autowired
private ProvinceService provinceService;
@Autowired
private CityService cityService;
@Autowired
private TownService townService;

private Town town;
private List<Town> townList;

public Town getTown() {
return town;
}
public void setTown(Town town) {
this.town = town;
}
public List<Town> getTownList() {
return townList;
}
public void setTownList(List<Town> townList) {
this.townList = townList;
}
private City city;
private List<City> cityList;

public City getCity() {
return city;
}
public void setCity(City city) {
this.city = city;
}
public List<City> getCityList() {
return cityList;
}
public void setCityList(List<City> cityList) {
this.cityList = cityList;
}
private Province province;
private List<Province> provinceList;
public Province getProvince() {
return province;
}
public void setProvince(Province province) {
this.province = province;
}
public List<Province> getProvinceList() {
return provinceList;
}
public void setProvinceList(List<Province> provinceList) {
this.provinceList = provinceList;
}
private int province_id;
private int city_id;

public int getCity_id() {
return city_id;
}
public void setCity_id(int city_id) {
this.city_id = city_id;
}
public int getProvince_id() {
return province_id;
}
public void setProvince_id(int province_id) {
this.province_id = province_id;
}
public String ajaxProvince(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码
PrintWriter writer=null;
try {
writer = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
provinceList=provinceService.findAllProvince();
JSONArray jsonArray = JSONArray.fromObject(provinceList);
writer.print(jsonArray.toString());
return null;
}
public String ajaxCity(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码
PrintWriter writer=null;
try {
writer = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
provinceList=provinceService.findAllProvince();
cityList=cityService.findAllCity(province_id);
JSONArray jsonArray = JSONArray.fromObject(cityList);
writer.print(jsonArray.toString());
return null;
}
public String ajaxTown(){
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");// 防止弹出的信息出现乱码
PrintWriter writer=null;
try {
writer = response.getWriter();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
townList=townService.findAllTown(city_id);
JSONArray jsonArray = JSONArray.fromObject(townList);
writer.print(jsonArray.toString());

return null;
}

}
--the end--
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: