简单实用ssm+json+ajax三级联动

来源：互联网发布：知乎伊朗小公主编辑：程序博客网时间：2024/06/05 04:15

有些伙伴听到做三级联动就觉得很难，单你看了这个你会觉得很简单的，说白了就是两个2级联动。这个demo是在ssm的基础上用通过json+ajax实现的！可能做的不好，希望大家见解！

这里用到jsonArray这个这个类，所以关于这个类的包及相关包（比如：commons-beanutils-1.9.2.jar，commons-collections-3.2.2.jar等）一定要齐。在这里说声抱歉，我就只放关键代码，想看完整的还要麻烦大家去下载完整项目

包的下载路径是：http://download.csdn.net/detail/sun2015_07_24/9400816

项目的下载路径是：http://download.csdn.net/detail/sun2015_07_24/9400832

先看效果

项目路径

action类

package com.ssm.action;import java.io.IOException;import java.util.List;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;import com.ssm.entity.CityEntity;import com.ssm.entity.ProvinceEntity;import com.ssm.entity.TownEntity;import com.ssm.service.PctService;/** * 省市镇三级联动action *  */public class PctAction extends ActionSupport {private static final long serialVersionUID = 1L;private List<ProvinceEntity> provinceList;private List<CityEntity> cityList;private List<TownEntity> townList;private PctService pctService;private String pid;private String cid;/** * 查询所有省份 *  * @return */public String queryProvince() {provinceList = pctService.queryProvince();return SUCCESS;}/** * 查询对应省份的城市 *  * @return * @throws IOException  */public void queryCity() throws IOException {HttpServletResponse response = ServletActionContext.getResponse();//防止乱码response.setCharacterEncoding("UTF-8");cityList = pctService.queryCity(pid);//list转换为jsonJSONArray json = JSONArray.fromObject(cityList);response.getWriter().print(json.toString());response.getWriter().flush();        response.getWriter().close();}/** * 查询对应城市的城镇 *  * @return * @throws IOException  */public void queryTown() throws IOException{HttpServletResponse response = ServletActionContext.getResponse();response.setCharacterEncoding("UTF-8");townList = pctService.queryTown(cid);//list转换为jsonJSONArray json = JSONArray.fromObject(townList);response.getWriter().print(json.toString());response.getWriter().flush();response.getWriter().close();}}

js代码

</pre><pre name="code" class="html"><script type="text/javascript">$().ready(function(){$("#province").change(function() {$.ajax( {type : "post",url : "<%=basePath %>/queryCity.do",data : "pid=" + $("#province").val(),cache : false,dataType : "json",success : function(json) {var str = "<option>请选择</option>";$("#city").html("");for ( var i = 0; i < json.length; i++) {str += "<option value='" + json[i].cid+ "'>" + json[i].cname+ "</option>";}$("#city").append(str);$("#town").html("");$("#town").append("<option>请选择</option>");},error : function() {alert("请与管理员联系");}});});$("#city").change(function() {var params = $("#city").val();$.ajax( {type : "post",url : "<%=basePath %>/queryTown.do",data : "cid=" + params,cache : false,dataType : "json",success : function(json) {var str = "<option>请选择</option>";$("#town").html("");for ( var i = 0; i < json.length; i++) {str += "<option value='" + json[i].tid+ "'>" + json[i].tname+ "</option>";}$("#town").append(str);},error : function() {alert("请与管理员联系");}});});})</script>

boby代码

<body>    <s:select theme="simple" id="province" headerKey="" headerValue="请选择" list="provinceList" listKey="pid" listValue="pname" />    <select id="city" name="city"><option>请选择</option></select>    <select id="town" name="town"><option>请选择</option></select>  </body>

1 0