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

最新推荐文章于 2024-07-16 20:04:56 发布

孙振光

最新推荐文章于 2024-07-16 20:04:56 发布

阅读量1.6w

点赞数 5

分类专栏： js 文章标签： ajax json js 三级联动 select

本文链接：https://blog.csdn.net/sun2015_07_24/article/details/50504623

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有些伙伴听到做三级联动就觉得很难，单你看了这个你会觉得很简单的，说白了就是两个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转换为json
		JSONArray 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转换为json
		JSONArray 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>

孙振光

关注

5
点赞
踩
30

收藏

觉得还不错? 一键收藏
2
评论
简单实用ssm+json+ajax三级联动

有些伙伴听到做三级联动就觉得很难，单你看了这个你会觉得很简单的，说白了就是两个2级联动。这个demo是在ssm的基础上用通过json+ajax实现的！可能做的不好，希望大家见解！这里用到jsonArray这个这个类，所以关于这个类的包及相关包（比如：commons-beanutils-1.9.2.jar，commons-collections-3.2.2.jar等）一定要齐。在这里说声抱歉，我
复制链接

扫一扫

专栏目录