您的位置:首页 > Web前端 > JQuery

SSH JQuery Json ajax请求返回List对象集合

2010-08-24 19:09 791 查看
1.需要的jar文件:


2.struts.xml配置

<package name="ajax" namespace="/ajax" extends="json-default">
    	<action name="jaxIT"  class="dcInfoTypeAction">
			<result type="json">
				<param name="includeProperties">
					 listOne/[/d+/]/.id,listOne/[/d+/]/.typeName
					,listTwo/[/d+/]/.id,listTwo/[/d+/]/.typeName
					,listThree/[/d+/]/.id,listThree/[/d+/]/.typeName
				</param> 
			</result>
		</action>	
    </package>




3.JSP页面中

$(function (){	
			    // 注册“顶级分类”触发生生一级分类事件
				$("#stZerostts").change(function(){
				    $("#stZerostts option").each(function(i,o){
				        if($(this).attr("selected"))
				        {
				           ajaxSlOneList($(this).attr("value"),1);			          
				        }
				    });
				});
			});

			$(function (){	
			 	// 注册“一级分类”触发生生二级分类事件
				$("#stOnestts").change(function(){
				    $("#stOnestts option").each(function(i,o){
				        if($(this).attr("selected"))
				        {			     	   
				           ajaxSlTwoList($(this).attr("value"),2);				          
				        }
				    });
				});
			});

			// ajax 请求图片动态显示
			$("#loading").ajaxStart(function(){$(this).show();});
			$("#loading").ajaxStop(function(){$(this).hide();});
			
			// ajax请求 生成一级分类
			function ajaxSlOneList(father,mark){			
				var url = '/ajax/jaxIT!slOneList.do?father='+father+'&mark='+mark;
				jQuery.post(url,callbackFunOne, 'json');

			}
			// ajax请求 生成二级分类
			function ajaxSlTwoList(father,mark){
				var url = '/ajax/jaxIT!slTwoList.do?father='+father+'&mark='+mark;
				jQuery.post(url,callbackFunTwo, 'json');
			}
		
			// 返回一级分类列表
			function callbackFunOne(data1){
				$("#stOnestts").empty();
				$("#stOnestts").append("<option value='#'>一级分类</option>");	

				$("#stTwotts").empty();
				$("#stTwotts").append("<option value='#'>二级分类</option>");
			
				if(!$.isEmptyObject(data1.listOne)){
					$.each(data1.listOne, function(i, n){						
						$("#stOnestts").append("<option value='"+n.id+"'>"+n.typeName+"</option>");										
					});
				}
			}
			function callbackFunTwo(data2){
				$("#stTwotts").empty();
				$("#stTwotts").append("<option value='#'>二级分类</option>");
		
				if(!$.isEmptyObject(data2.listTwo)){
					$.each(data2.listTwo, function(i, n){						
						$("#stTwotts").append("<option value='"+n.id+"'>"+n.typeName+"</option>");										
					});
				}
			}


<tr>
<td class="narrow-label">请选择父类</td>
<td>
<select id="stZerostts" name="stZerostts">
<option value="#">顶级分类</option>
<s:iterator id="it" value="listZero">
<option value="<s:property value="#it.id"/>"><s:property value="#it.typeName"/></option>
</s:iterator>
</select>
<select id="stOnestts" name="stOnestts">
<option value="#">一级分类</option>
</select>
<select id="stTwotts" name="stTwotts">
<option value="#">二级分类</option>
</select>

</tr>



动态的加载select选项。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: