ajax异步请求

发布时间：2020-12-16 02:59:36 所属栏目：百科来源：网络整理

导读：需求：需要通过二级联动的方式将二级列表数据展示出来一级列表选择(注意要给id赋值用于定位) div class="control-group"label class="control-label"评分:/labeldiv class="controls"form:select id="type" path="score" htmlEscape="false" style="width:2

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

一级列表选择(注意要给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,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",data:"value="+this.value,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);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!