ajax异步请求

需求：需要通过二级联动的方式将二级列表数据展示出来

一级列表选择(注意要给id赋值用于定位)

	<div class="control-group">
			<label class="control-label">评分:</label>
			<div class="controls">
				<form:select id="type" path="score" htmlEscape="false" style="270px;" class="required">
					<form:option value="">----select----</form:option>
					<form:options items="${scoreList}" itemLabel="label" itemValue="id" />   
				</form:select>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		

　　

二级输入框联动展示(注意要给id赋值)

<div class="control-group">
			<label class="control-label">评分准则:</label>
			<div class="controls">
				<form:input   id="subType" path="scoreCriteria" htmlEscape="false" style="260px;" maxlength="125" class="required"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>

JavaScript方法（一级列表变化将会调用该方法）

<script type="text/javascript">
	
		
		$("#type").on("change",function(){
    		$.ajax({
    			url:"${ctx}/oc/devopsscore/selectSec",//根据传的id值请求子类型的地址。,
    			data:"id="+this.value,
    			type:"post",
    			dataType:"json",
    			success:function(result){
    				$("#subType").val(result["description"]);
    			}
    		})
    	});
			
	</script>

　　

JavaScript方法（一级列表变化将会调用该方法） 这种方法是将传入的数据转换成选择框的形式的显示方式

$("#type").on("change",function(){
	    		$.ajax({
	    			url:"${ctx}/delivery/platform/selectSub",//根据传的type值请求子类型的地址。,
	    			data:"type="+this.value,
	    			type:"post",
	    			dataType:"json",
	    			success:function(result){
	    				$("#subType").html("");
	    				var option1 = $("<option></option>").val("").text("--select--");
	    				$("#subType").append(option1);
	    				for(var i=0;i<result.length;i++) {
			    			var option = $("<option></option>").val(result[i]).text(result[i]);
			    			$("#subType").append(option);
			    		}
	    			}
	    		})
	    	});

　　

JavaScript方法（一级列表变化将会调用该方法） 这种方法是将传入的数据直接在输入框中显示出

<script type="text/javascript">
		$("#type").on("change",function(){
    		$.ajax({
    			url:"${ctx}/oc/devopsscore/selectSec",//根据传的type值请求子类型的地址。,
    			data:"value="+this.value,
    			type:"post",
    			dataType:"json",
    			
    			success:function(result){
    				$("#subType").val(result["description"]);
    			}
    		})
    	});
			
	</script>

　　

后台方法（@responsebody不能忘记加上，不然ajax无法执行success:function(result)）

@RequestMapping(value = "selectSec")
	@ResponseBody
	public String selectSec(OcDict ocDict, RedirectAttributes redirectAttributes) {
		System.err.println("ocDict"+JsonMapper.toJsonString(ocDict));
		ocDict=ocDictService.get(ocDict);
		return JsonMapper.toJsonString(ocDict);
	} 

　　

将json转换成list

JavaType javaType = JsonMapper.getInstance().createCollectionType(ArrayList.class, DpmProblemReviewInfo.class);
		List<DpmProblemReviewInfo> objectListData  = JsonMapper.getInstance().fromJson(changeData,javaType);