jquery+struts2+json省市县三级联动
2016-03-13 16:48
567 查看
前台页面
</body>
struts.xml
<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--
相关文章推荐
- jQuery的$.getJSON方法在IE浏览器下失效的解决方案
- etmvc+jQuery EasyUI Highcharts实现柱状图
- 菜鸟的Jquery validate入门
- jQuery(二)
- jquery插件-表单验证插件-rules
- jquery插件-表单验证插件-validator对象
- 使用jQuery.form插件,实现完美的表单异步提交
- 使用jQuery操作HTML的table表格的实例解析
- jquery点击当前对象,并alert文本内容
- PHP——菜单及内容轮换(Jquery)
- 常用jquery插件资料
- Jquery Ajax 跨域之JSONP方式极简示例,服务端是.net的ashx
- python web框架企业实战详解(第六期)\第三课时-ajax&jquery&webpy
- 使用jQuery操作HTML的table表格的实例解析
- Jquery ajax data 格式问题
- jquery插件-表单验证插件-提示信息中文化与定制提示信息
- jquery购物车插件minicart.js
- jquery实现图片自动轮播
- jQuery学习之jQuery Ajax用法详解
- jquery插件-表单验证插件