Srutst,jquery,ajax,json实现联动二级下拉框

整体流程大概是action->jsp->ajax->action->struts->jsp

1.jar包最低要求


最高包要求(struts核心包和json需要的包):

struts核心包:

Struts2+Jquery实现ajax并返回json类型数据

json需要的包:

Struts2+Jquery实现ajax并返回json类型数据

为什么这里不提倡把全部包导进去,因为如果你这么做有很大可能造成jar包的版本冲突导致项目无法运行

2.设置jquery根据自己js文件的目录设置

<script src="js/jquery.min.js"></script>

3.获取父框数据,Jsp写法如下,css为博主用的是boostrap框架

<div class="form-group">


							<!-- 循环遍历下拉框 -->
							<select class="form-control" id="fatherboard"
								style="width:300px;float:left; ">
								<option value="" selected="selected">-选择大板块-</option>
								<s:iterator value="#request.boards">
									<option value="<s:property value="bigBoard.id" />">
										<s:property value="bigBoard.name" /></option>
								</s:iterator>
							</select> 
							
							<select class="form-control" id="sonboard"
								style="width:200px; float:left; ">
								<option value="">-选择小板块-</option>
							</select> <span style="color:red;">请选择所要发帖的版块</span>
						</div>

4.然后通过ajax获取子框内容,js代码如下

<!-- 处理下拉框JS -->
	<script type="text/javascript">
		$(document).ready(function() {
			//change用于截获下拉框的状态变化
			$("#fatherboard").on('change', function() {
				//获取父框的选择值
				var id = $(this).val();
				$.ajax({
					type : "post",
					url : "board/findson", //需要用来处理ajax请求的action,findson为方法名,board是namespace
					data : { 
						//设置数据源
						id : $(this).val()
					},
					dataType : "json", //设置需要返回的数据类型
					success : function(data) {
						var json = eval("(" + data + ")"); //将数据转换成json类型,可以把data用alert()输出出来看看到底是什么样的结构
						//清空子下拉框
						$('#sonboard').empty();
						//循环遍历子下拉框
						for (var i = 0; i < json.length; i++) {
							var s = json[i];
							$('#sonboard').append("<option value=" + s.id + ">" + s.name + "</option>");
						}
					},
					error : function() {
						alert("系统异常,请稍后重试!");
					} //这里不要加","
				});
			});
		});
	</script>
5.再看action方面
public class aa extends ActionSupport implements ServletRequestAware {

	//HttpServletRequest是通过ServletRequestAware接口实现
	private HttpServletRequest request;
	//必须对result设置get和set方法
	private String result;

	@Override
	public void setServletRequest(HttpServletRequest arg0) {
		this.request = arg0;
	}

	public String getResult() {
		return result;
	}

	public void setResult(String result) {
		this.result = result;
	}

	/**
	 * ajax传来的值获取子版块信息
	 * 
	 * @return
	 * @throws IOException
	 */

	public String findson() throws IOException {
		try {
			// 用户截获从jsp页面传来的数据
			int id = Integer.parseInt(httprequest.getParameter("id"));
			// 此处为子下拉框的集合
			List<SmallBoard> boardson = BoardBiz.findSonBoard(id);
			// 集合转为json形式 包不要导错:import net.sf.json.JSONArray;
			JSONArray json = JSONArray.fromObject(boardson);
			// json转为string形式(序列化)
			result = json.toString();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return SUCCESS;
	}


}

6.然后再看struts

<!-- 完成对board操作的包 -->
	<package name="board" namespace="/board" extends="struts-default,json-default">
		
		<action name="findson" class="board" method="findson">
            <!-- 返回json类型数据 -->
			<result  type="json">
				<param name="root">result
					<!-- result是action中设置的变量名,也是页面需要返回的数据,
					该变量必须有setter和getter方法 -->
				</param>
			</result>
        </action>
	</package>

7.看看效果


完美

有不懂的朋友可以留言问我,谢谢.

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭