调用ajax返回List，对问题的一个记录

最新推荐文章于 2025-03-20 16:59:52 发布

原创最新推荐文章于 2025-03-20 16:59:52 发布

· 2.1k 阅读

0 ·

版权

随手记专栏收录该内容

10 篇文章

订阅专栏

在项目中实现级联下拉框时遇到问题，当一个下拉框选择项改变，通过Ajax从后台获取的List数据处理方式与预期不同。本文记录了解决这个问题的过程，包括后台将List转化为JsonArray传递给前端的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这两天，做小项目碰到了一个问题，流程是这样的，一个下拉框控制类型，另一个下拉框根据前一个下拉框的内容变化而变化，通俗的说就是级联操作。前一个下拉框影响另一个下拉框的内容。而在这里我主要遇到的问题是返回的List和我原来用到的完全不一样。这里直接看实例：

<!-- 机构类型 -->
    <div class="form-group">
        <label class="col-md-3 control-label">借出用户类型:</label>
	<div class="col-md-4">
	<select name="lend.stationType" id="stationType" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1">
	    <option value="">--请选择--</option>
	    <option value="1" select="selected" >员工</option>
	    <option value="2">监测站</option>
	</select>
	</div>
    </div>
<!-- 机构 -->
    <div class="form-group">
        <label class="col-md-3 control-label"><font color="red">*</font>机构:</label>
	<div class="col-md-4">
	<select name="lend.station" id="station" class="select2_category form-control" data-placeholder="Choose a Category" tabindex="1">
	    <option value="">---请选择--- </option>
	    <c:forEach var="comList" items="${companyList }">
	        <option value="${comList.YHBH }">${comList.YHMC }</option>
	    </c:forEach>
	</select>										
	</div>
    </div>

这里刚进入这个页面的时候，我是直接显示员工类型和员工的姓名，如果改变类型那么下一个下拉框的内容也随之变化,通过ajax返回一个关于机构的集合。

下面是我写的js：

$("#stationType").change(function(){
	var types = $("#stationType").val();
	if(types != ""){
		$.ajax({
			type : "POST",
			url : "product_changeStationType.action",
			data : {stationType:types, t:Math.random()},
			success:function(res){
				var dataObj = JSON.parse(res);
            	                //var resd = eval(res["list"]);
				if(types == "1"){ // 公司
					var opts = '<option value="" >---请选择---</option>';
					for(var i = 0; i <dataObj.length; i++){
						opts += '<option value="'+dataObj[i].YHBH+'">'+dataObj[i].YHMC+'</option>';
					}
					
					$("#station").html(opts);
				}
				else{
					if(types == "2"){
						var opts = '<option value="" >---请选择---</option>';
						for(var i = 0; i <dataObj.length; i++){
							opts += '<option value="'+dataObj[i].BMBM+'">'+dataObj[i].BMMC+'</option>';
						}
						$("#station").html(opts);
					}
					else{
						alert("数据类型错误，请重新进入此页面");
					}
				}
			},
			error:function(){
				alert("返回的数据类型不匹配");
			}
		});
	}
})

后台：

	public void changeStationType(){
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpSession session= request.getSession();
		int stationType = Integer.parseInt(request.getParameter("stationType").toString());
		HashMap map = new HashMap();
		HttpServletResponse response = ServletActionContext.getResponse();
		if(stationType == 1){
			StringBuffer companySql = new StringBuffer("select t.yhbh,t.yhmc from base_yh t where t.bm='420000000001' and t.zt='1' ");
			companyList = (List) baseDao.loadBySql(companySql.toString(), null);
			this.printToJson1(companyList);
		}
		else{
			if(stationType == 2){
				StringBuffer sybmSql = new StringBuffer("select t.bmbm,t.bmmc from ckgl_sybm t  ");
				sybmList = (List) baseDao.loadBySql(sybmSql.toString(), null);
				this.printToJson1(sybmList);
			}
			else{
				//输出类型出错
				this.printToJson("");
			}
		}
	}

	public void printToJson1(List json){
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		try {
			JSONArray jsons = JSONArray.fromObject(json);
			response.getWriter().print(jsons);
		} catch (IOException e) {
			
		} 
	}

这里是在后台生成一个list，再转为JsonArray数组形式传给前台，老实说每次这样关于后台传前台我用过多种办法，但每次写完都不记得了，这里做一个记录，避免以后忘记了。

通过ajax，后台传给前台一个List 就用这种方式。