在struts2下使用ajax，并通过json处理回传数据

日前的项目用到ssh，其中就要用struts2下配合ajax来处理些逻辑，在网络找了好久，先写下记录记录。

做的业务是通过查数据，动态更新年份和月份的下拉单。本来是不用这样的，偏偏甲方那边说可能数据不是连续的（吐一口老血），

应该按照操作员录入的数据来显示！

主要有3个文件，js、struts2的xml配置文件、action类。

action类，分别获取了年份和月份数据。但是因为页面的原因，年份使用了map经过json格式化后的字符串，月份则使用了list形式

package com.teamu.sldyportal.marcket.web;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Iterator;
import java.util.LinkedHashMap;
import java.util.List;

import javax.annotation.Resource;

import net.sf.json.JSONObject;

import org.apache.commons.lang.StringUtils;

import com.teamu.core.util.CharacterConst;
import com.teamu.core.web.EasyUIGridAction;
import com.teamu.core.web.EasyUIGridSortAction;
import com.teamu.sldyportal.finance.entity.FinanceDataYear;
import com.teamu.sldyportal.marcket.business.IMarcketBusiness;
import com.teamu.sldyportal.marcket.entity.MarcketDataYear;

public class MarcketYearAction extends
EasyUIGridSortAction<MarcketDataYear, IMarcketBusiness> {

	@Resource(name = "marcketBusiness")
	private IMarcketBusiness bsMarcket;

	private MarcketDataYear mdy = new MarcketDataYear();
	
	private HashMap<String,String> yearMap = new HashMap<String,String>();
	
	private HashMap<String,String> monthMap = new HashMap<String,String>();
	
	private String jsonResult = "";
	private List<String> yearList = new ArrayList<String>();
	
	@Override
	protected IMarcketBusiness getService() {
		return bsMarcket;
	}

	
	/**
	 * 按年份查询营销数据的月份列表
	 * @return
	 */
	public String getMonths(){
		monthMap = bsMarcket.getMonthsByYear(mdy.getYear());
		//将map对象转换成json的字符串，返回默认的 SUCCESS
		JSONObject json = JSONObject.fromObject(monthMap);
		jsonResult = json.toString();
		return SUCCESS;
	}
	
	/**
	 * 为gis数据获取年份
	 * @return
	 */
	public String getGisDataYear(){
		yearMap = bsMarcket.getYearsYX();
		Iterator<String> yearItr = yearMap.keySet().iterator();
		while(yearItr.hasNext()){ //这里没有转换json，而是直接把list形式数据回传
			yearList.add(yearItr.next());
		}
		return "getDateYear";
	}
	

}

sturts2.xml

<package name="marcket" extends="json-default">
        <result-types>
            <result-type name="chart" class="org.apache.struts2.dispatcher.ChartResult"></result-type>
        </result-types>
        <action name="marcket_month_action_*" 
        		class="com.teamu.sldyportal.marcket.web.MarcketMonthAction" method="{1}">
        	<result name="index">/page/marcket/indexm.jsp</result>
        </action>
        
        <action name="marcket_year_action_*" 
        	class="com.teamu.sldyportal.marcket.web.MarcketYearAction" method="{1}">
            <result name="index">/page/marcket/groupindex.jsp</result>
            <result name="indexa">/page/marcket/groupTable.jsp</result>
            <!-- 回传的年份,在action中如果使用了默认的  return SUCCESS;  ，
            	这里可以添加root属性，属性值是要回传的数据。细节自己google -->
            <result type="json">
            	<param name="noCache">false</param>
            	<param name="root">jsonResult</param>
            </result>
            <!-- 回传的月份，是list形式，在action中的方法的返回值是  return "getDateYear"; -->
            <result type="json" name="getDateYear">
            	<param name="noCache">false</param>
            	<!-- includeProperties是一个过滤器，可以把规定的数据筛选出来，
            		支持正则表达式。意思是list数组中 yearList[i] 的数据。-->
            	<param name="includeProperties">
	                    ^yearList\[\d+\]
	            </param>
            </result>
        </action>
        
    </package>

在js脚本中写好ajax方法和动态生成 html联动下拉单的方法

//根据选择的年份更新月份的显示
function changeSelectYear(year){
	getMonthsThisYear("selectMonth",year,$("input[type='radio']:checked").val());
}

//动态获取年份数据
function showYear(dataType){
	var url = "";
	var str = "";
	switch (dataType){
	case "":
		alert('请选择指标');
		break;
	case "1":
		url = "marcket_year_action_getGisDataYear.do";
		break;
	case "2":
		url = "marcket_year_action_getGisDataYear.do";
		break;
	case "3":
		url = "funds_year_action_getGisDataYear.do";
		break;
	case "4":
		url = "funds_year_action_getGisDataYear.do";
		break;
	case "5":
		url = "finance_year_action_getGisDataYear.do";
		break;
	case "6":
		url = "finance_year_action_getGisDataYear.do";
		break;
	default:
        return;    
	}
	//根据请求类型加载年份数据
	$.ajax({
		type : "POST",
		url : url,
		data: "",
		dataType: "json",
		success : function(data) {
			//alert("years \n"+data.yearList.length);
			//回传list形式的数据，不知道为什么不能直接写变量名，
			//必须用 data.yearList。可能yearList也算是回传的json数据的一个属性
			var years = data.yearList;			
			for(var i=0;i<years.length;i++){
				if(years[i] != undefined){
					str += "<option value='"+ years[i] +"'>"+ years[i] +"年</option>";
				}
			}
			$("#selectYear").html(str);
		}
	});
}

//获取某年有数据的月份，并根据下拉列表的id设置
function getMonthsThisYear(id,year,dataType){
	var str = "";
	var url = "";
	var data4url = "";
	switch (dataType){
	case "":
		alert('请选择指标');
		break;
	case "1":
		url = "marcket_year_action_getMonths.do";	data4url="mdy.year=" + year;
		break;
	case "2":
		url = "marcket_year_action_getMonths.do";	data4url="mdy.year=" + year;
		break;
	case "3":
		url = "funds_year_action_getMonths.do";		data4url="fdy.year=" + year;
		break;
	case "4":
		url = "funds_year_action_getMonths.do";		data4url="fdy.year=" + year;
		break;
	case "5":
		url = "finance_year_action_getMonths.do";	data4url="findy.year=" + year;
		break;
	case "6":
		url = "finance_year_action_getMonths.do";	data4url="findy.year=" + year;
		break;
	default:
      return;    
	}
	$.ajax({
		type : "POST",
		url : url,
		data: data4url,
		dataType: "json",
		success : function(json) {
			//回传的json数据是java后台json化处理后的字符串，通过 eval()把它变成json格式，再通过循环处理
			var months ; 
			// key:value 内容形如 {"1":"1","2":"2","3":"3","4":"4"...."12":"12"}，
			months = eval("("+json+")");
			for(var i=1;i<13;i++){
				if(months[i] != undefined){//使用 Object[index] 获取遍历的对象
					str += "<option value='"+ months[i] +"'>"+ months[i] +"</option>";
				}
			}
			var sltid = "#"+id;
			$(sltid).html(str);
		}
	});
}

在Jsp页面就是写好<select></select>，并设置好id以及 onchange事件就可以了

    		<select name="selectType" id="selectType" οnchange="changeSelectType();" style="width:50px">
                	<option value="1" selected="selected">按年</option>
                	<option value="3">按月</option>
              	</select><select name="selectYear" id="selectYear" style="width:66px" 
          		οnchange="changeSelectYear(this.options[this.selectedIndex].value);">
                </select>
                <select name="selectMonth" disabled="disabled" id="selectMonth" style="width:50px">
                </select>