SSH框架下ajax实现无刷新下拉菜单-行政区域管理

最新推荐文章于 2021-08-06 20:01:11 发布

原创最新推荐文章于 2021-08-06 20:01:11 发布 · 380 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#SSH #AJAX

本文介绍了一个使用Struts2实现的省份、城市、区县三级联动的异步加载下拉框功能。通过Struts2配置文件定义了处理ajax请求的动作，并在DAO层实现了从数据库获取数据的方法。Service层提供了业务逻辑处理，而Action层则负责将数据转化为JSON格式返回给前端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据表结构：

struts配置文件：

	<package name="area" namespace="/area" extends="json-default" >
 		<action name="ajax" class="action.AreaAction" method="ajax">  
                    <result name="success" type="json">  
                        <!-- <param name="root">result</param>   -->
                    </result>  
                </action> 
        </package>

DAO层：

	@SuppressWarnings("unchecked")
	public List<MysqlProvince> getprovince() {
		String sql = "from MysqlProvince";
		List<MysqlProvince> provincLlist = this.getHibernateTemplate().find(sql);
		return provincLlist;
	}

	// 根据省编号获得市
	@SuppressWarnings("unchecked")
	public List<MysqlCity> getcity(String code_p) {
		String sql = "from MysqlCity where code_p='" + code_p + "' ";
		List<MysqlCity> cityLlist = this.getHibernateTemplate().find(sql);
		return cityLlist;
	}

	// 根据市编号获得区
	@SuppressWarnings("unchecked")
	public List<MysqlArea> getarea(String code_c) {
		String sql = "from MysqlArea where code_c='" + code_c + "' ";
		List<MysqlArea> areaLlist = this.getHibernateTemplate().find(sql);
		return areaLlist;
	}

service层：

	@Override
	public List<MysqlArea> getarea(String code_c){
		return areaDAO.getarea(code_c);
	}

	@Override
	public List<MysqlCity> getcity(String code_p){
		return areaDAO.getcity(code_p);
	}
	
	@Override
	public  List<MysqlProvince> getprovince(){
		return areaDAO.getprovince();
	}

action：

	
	/***
	 * 异步加载下拉框
	 * @return
	 * @throws IOException
	 */
	public String ajax() throws IOException {
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=UTF-8");

		if (getGrade().equals("province")) {
			provinceList = areaService.getprovince();
			PrintWriter pw = response.getWriter();
			try {
				Gson g = new Gson();
				String data = g.toJson(provinceList);
				System.out.println("data:" + data);
				pw = response.getWriter();
				pw.write(data);
			} catch (Exception e) {
				System.out.println("getAllHotnewsForJson出错：" + e);
			} finally {
				pw.flush();
				pw.close();
			}
			return null;
		} else if (getGrade().equals("city")) {
			cityList = areaService.getcity(code);
			PrintWriter pw = response.getWriter();
			try {
				Gson g = new Gson();
				String data = g.toJson(cityList);
				System.out.println("data:" + data);
				pw = response.getWriter();
				pw.write(data);
			} catch (Exception e) {
				System.out.println("getAllHotnewsForJson出错：" + e);
			} finally {
				pw.flush();
				pw.close();
			}
			return null;
		} else if (getGrade().equals("area")) {
			areaList = areaService.getarea(code);
			PrintWriter pw = response.getWriter();
			try {
				Gson g = new Gson();
				String data = g.toJson(areaList);
				System.out.println("data:" + data);
				pw = response.getWriter();
				pw.write(data);
			} catch (Exception e) {
				System.out.println("getAllHotnewsForJson出错：" + e);
			} finally {
				pw.flush();
				pw.close();
			}
			return null;
		}
        }

前台代码：

ajax调用：

<script type="text/javascript">
function onSelectChange(obj,toSelId){
    setSelect(obj.value,toSelId);
}

function setSelect(fromSelVal,toSelId){
    document.getElementById(toSelId).innerHTML="";
    jQuery.ajax({	
      url: "ajax.action",
      cache: false,
      data:{"code":fromSelVal,"grade":toSelId}, 
      scriptCharset: 'utf-8',
      success: function(data){
                var optionString = "<option grade=\'请选择\' selected = \'selected\'>--请选择子类--</option>";
                var xqo = eval('(' + data + ')'); 
                //alert("toSelId==="+toSelId);
                if(toSelId == 'province'){                
                    for(var i in xqo){ 
                    	optionString+="<option value='"+xqo[i].codeP+"'>"+xqo[i].name+"</option>"    
                	}   
                }else if(toSelId == 'city'){                
                    for(var i in xqo){ 
                    	optionString+="<option value='"+xqo[i].codeC+"'>"+xqo[i].name+"</option>"    
                	}   
                }else if(toSelId == "area"){
	                for(var i in xqo){ 
	                    optionString+="<option value='"+xqo[i].codeA+"'>"+xqo[i].name+"</option>"    
	                } 
                }
                $("select[name="+toSelId+"]").append(optionString); 
      },
      error: function (){
    	alert("error");
    }
    });
}  

setSelect(null,'province');
$('#province').click();
</script>

页面：

    <li><select name="province" id="province" onchange="onSelectChange(this,'city');" style="width:150px" class="input w50">
	<option value="null">请选择</option>
	    <s:iterator value="provinceList" status="stuts" id="test">
		<option value='<s:property value="#test.codeP" />'><s:property value="#test.name" /></option>
	    </s:iterator>
    </select></li>

    <li><select name="city" id="city" onchange="onSelectChange(this,'area');" style="width:150px" class="input w50">
        <option value="null">请选择</option>
    </select></li>

    <li><select name="area" id="area" style="width:150px" class="input w50" onChange="">
	<option value="null">请选择</option>
    </select></li>

参考：

https://my.oschina.net/u/3734228/blog/1594916

https://blog.youkuaiyun.com/lyy296293760/article/details/78685163/

https://blog.youkuaiyun.com/u010900754/article/details/50886168