码迷,mamicode.com
首页 > Web开发 > 详细

ajax异步请求

时间:2018-12-23 11:08:32      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:html   UNC   ict   for   return   href   app   instance   rect   

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

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

	<div class="control-group">
			<label class="control-label">评分:</label>
			<div class="controls">
				<form:select id="type" path="score" htmlEscape="false" style="width: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="width: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);

  

ajax异步请求

标签:html   UNC   ict   for   return   href   app   instance   rect   

原文地址:https://www.cnblogs.com/jiajialeps/p/10163122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!