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

xiaoxiao2021-02-28  46

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

前台页面

<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

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

struts.xml

@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; } } action类

转载请注明原文地址: https://www.6miu.com/read-2613541.html

最新回复(0)