`
dreamoftch
  • 浏览: 486212 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

struts2+json/ajax

struts2 ajax json 
阅读更多 
如果只需要返回一个字符串或其他文本信息，则：
 <result type="stream">
                                    <param name="contentType">text/html</param>
                                    <param name="inputName">inputStream</param>
</result>
在action里面：
public String login1() throws IOException{
		ByteArrayOutputStream bos = new ByteArrayOutputStream();
		bos.write("login".getBytes());
		inputStream = new ByteArrayInputStream(bos.toByteArray());
		return "success";
	}
并且加上inputstream的get/set方法即可，在页面直接ajax的result就是结果
 $.post("client!login1.action", { username: username, password: password },
    		   function(result){
    		     alert("Data : " + result);
    		   });




方法1：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
        "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>


	<!-- 开发阶段设置 -->
	<constant name="struts.devMode" value="true" />
	<constant name="struts.serve.static.browserCache " value="false" />
	<constant name="struts.configuration.xml.reload" value="true" />
	<!-- 开发阶段设置 -->
	<!-- <package name="json-default" extends="struts-default"> <result-types> 
		<result-type name="json" class="org.apache.struts2.json.JSONResult" /> </result-types> 
		<interceptors> <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/> 
		</interceptors> </package> -->

	<package name="/base" extends="struts-default" namespace="/base">
		<result-types>
			<result-type name="json" class="org.apache.struts2.json.JSONResult" />
		</result-types>
		
		<action name="Province" class="two.SupplyDetailAction" method="province">
			<result type="json">
				<!-- <param name="root">result</param> -->
			</result>
		</action>
		<action name="City" class="two.SupplyDetailAction" method="city">
		</action>
	</package>
	
	<package name="ns" extends="struts-default" namespace="/p">
		<action name="index">
			<result type="freemarker" name="input">/index.ftl</result>
		</action>
	</package>
</struts>
  
<html>
<head>

<script type="text/javascript" src="${base}/jquery.js"> </script> 

<script >
$(document).ready(function(){
   
	    var province=$("#province");   
	    var city=$("#city");   
	    var provinceurl="${base}/base/Province.action";   
	    $.post(provinceurl,{code:"province"},function(dataObj){   <#-- 因为在struts.xml中type="json" 
	    																	所以后台action中的属性 会变为json类型的dataObj如{name:tch,age:22......}
	    																	所以在页面端通过对dataObj进行操作，如dataObj.name   dataObj.age
	    																	dataObj.provinces拿到的是一个后台的List,在前天则是一个对象数组，所以
	    																	通过遍历即可$.each(dataObj.provinces,function(index,value){})-->
	     
	        $.each(dataObj.provinces,function(index,item){   
	        var tempOption = document.createElement("option");   
	        tempOption.value = item.provinceId;   
	        tempOption.innerHTML  = item.provinceName;  
	        province.append(tempOption);   
	        });   
	    },"json");   
	     
	    province.change(function(){  
	    if($("#province option:selected").val() ==""){
	    	return;
	    } 
	      city.empty();
	      city.append("<option value='-1'>请选择省份</option>");    
	      var params={provinceCode:$("#province option:selected").val()};   
	      $.post("${base}/base/City.action",params,function(dataObj){   
	        $.each(dataObj.cities,function(index,item){   
	        var tempOption = document.createElement("option");   
	        tempOption.value = item.cityId;   
	        tempOption.innerHTML  = item.cityName;   
	        city.append(tempOption);   
	        });   
	      },"json");    
	    });   
	    

});

</script>
</head>
<body>
<form action="${base}/act.action" id="productForm"
			name="productForm" method="post">
<input type="text" onclick="ff();">
 <div>  
        
          省份：<select name="province" id="province">  
               <option value="">请选择省份</option>  
            </select>  
          城市：<select name="city" id="city">  
            <option>请选择城市</option>  
            </select>  
    </div>  

</form>
</body>
</html>
 

通过访问http://localhost:8080/WebTest/p/index.action访问index.ftl页面，页面加载完之后，已经完成了对省份的ajax请求，再改变省份的选择，就对城市也进行了ajax请求

 

但是这里仅仅实现了ajax请求json数据，其余的功能以及存在的问题还需自己修正和完善.

 

 

 

情况2：

 

如果：

<result type="json">
	<param name="root">result</param> 
</result>
 

即加入了

<param name="root">result</param>

那么就要作出相应的修改，因为这句话的意思是说将ajax请求返回的数据存储在了result变量里面，所以，要在action里面加入string类型的result，添加get/set方法，并且在execute或其他相应的方法里面return success之前要对result赋值、初始化。

public String province() {
		Province p = new Province();
		p.setProvinceId("1");
		p.setProvinceName("河南");
		provinces.add(p);
		Province p2 = new Province();
		p2.setProvinceId("2");
		p2.setProvinceName("河南2");
		provinces.add(p2);

                //下面这两句话就是对result的初始化，即将要返回给页面的数据放在result中。。
		JSONArray jsonArray2 = JSONArray.fromObject(provinces);
		this.result = jsonArray2.toString();
		return SUCCESS;
	}

 然后在页面里面

 

$.post(provinceurl,{code:"province"},function(msg){   
                //相应的在页面上，对于返回的数据要先进行处理，通过eval()将数据转化为json类型
		dataObj = eval("("+msg+")");
	        $.each(dataObj,function(index,item){   
	        var tempOption = document.createElement("option");   
	        tempOption.value = item.provinceId;   
	        tempOption.innerHTML  = item.provinceName;  
	        province.append(tempOption);   
	        });   
	    },"json");

 即可。

 

但是不建议使用方法2，因为这样多做了一些无用功

 

分享到：
| SQL group by 用法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics