ajax传递二维数组到前台

最新推荐文章于 2022-09-30 14:22:24 发布

原创最新推荐文章于 2022-09-30 14:22:24 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

JSP 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript和JSON实现的一维及二维数组动态加载的方法，包括前端选择框填充数据与后端数据处理流程。通过具体示例展示了如何在用户选择特定项时动态更新下拉列表。

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

第一：一维数组

JSP页面：

<tr>
            <td class="table_txm">企业行业类型</td>
            <td>
            	<s:select list="#request.induVers" id="induInfo_induVer" listKey="key" listValue="value" name="induInfo.induVer" cssStyle="width:95px;" onchange="ajaxLoadInduCode(this.value)"></s:select>
            	<s:select list="#request.induCodes" id="induInfo_induCode" listKey="key" listValue="value" name="induInfo.induCode" cssStyle="width:130px;"></s:select>
            </td>
          </tr>

相关JS :

function ajaxLoadInduCode(val) {
    	if(val != "" && val != 0) {
    		$.ajax({
					type: "POST",
					url: "${basePath}/ccxr/orgInfo!ajaxLoadIndoCode.action",
					dataType: 'json',
					data:{'version':val},
					async:false,
					success: function(data){
						if(null != data) {
							$("#induInfo_induCode").empty();
							for(var i=0;i<data.length;i++) {
								var op = '<option value="'+data[i].id+'">'+data[i].value+'</option>'
								$("#induInfo_induCode").append(op);
							}
						}
						
					}
			});
    	}
    }

后台函数处理：

/**
	 * 响应操作：异步加载行业类型
	 * @return
	 */
	public String ajaxLoadIndoCode() {
		PrintWriter out = null;
		JSONArray array = new JSONArray();
		JSONObject json = null;
		try {
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setContentType("text/html;charset=UTF-8");
			out = response.getWriter();
			
			String version = this.getAppRequestParameterByName("version");
			if(StringUtil.isNotNull(version)) {
				Map induCode = this.orgInfoService.queryInduCodeByVer(version);
				for(Iterator iter = induCode.keySet().iterator(); iter.hasNext();){
					json = new JSONObject();
					String key = (String)iter.next();
					json.put("id",key);
					json.put("value", induCode.get(key));
					array.add(json);
				}
			}
			out.print(array.toString());
		}catch(Exception e) {
			log.error("异步加载行业类型出错",e);
		}
		return null;
	}

二维数组：

JSP :类似上面的处理

JS:

	function loadVerAndCode(bsChannel){
			$.ajax({
					type: "POST",
					url: "${basePath}/ccxr/orgInfo!loadVerAndCode.action",
					dataType: 'json',
					data:{'bsChannel':bsChannel},
					async:false,
					success: function(data){
						if(null != data) {
							alert(data[0].length);
						
							$("#induVer").empty();
							for(var i=0;i<data[0].length;i++) {
								var op = '<option value="'+data[0][i].id+'">'+data[0][i].value+'</option>'
								$("#induVer").append(op);
							}
							$("#induCode").empty();
							for(var i=0;i<data[1].length;i++) {
								var op = '<option value="'+data[1][i].id+'">'+data[1][i].value+'</option>'
								$("#induCode").append(op);
							}
						}
						
					}
			});
		}

后台处理：（DEMO）

/**
	 * 响应操作：异步加载行业
	 * @return
	 */
	public String loadVerAndCode() {
		PrintWriter out = null;
		JSONArray array = new JSONArray();
		JSONObject json = null;
		try {
			HttpServletResponse response = ServletActionContext.getResponse();
			response.setContentType("text/html;charset=UTF-8");
			out = response.getWriter();
			
			String bsChannel = this.getAppRequestParameterByName("bsChannel");
			json = new JSONObject();
			
			JSONArray vers = new JSONArray();
			JSONArray codes = new JSONArray();
			
			JSONObject ver1 = new JSONObject();
			ver1.put("id", 1);
			ver1.put("value", "ver1");
			JSONObject ver2 = new JSONObject();
			ver2.put("id", 2);
			ver2.put("value", "ver2");
			
			vers.add(ver1);
			vers.add(ver2);
			
			JSONObject code1 = new JSONObject();
			code1.put("id", 1);
			code1.put("value", "code1");
			JSONObject code2 = new JSONObject();
			code2.put("id", 2);
			code2.put("value", "code2");
			JSONObject code3 = new JSONObject();
			code3.put("id", 3);
			code3.put("value", "code3");
			codes.add(code1);
			codes.add(code2);
			codes.add(code3);
			
			json.put("vers",vers);
			json.put("codes",codes);
			array.add(json);
			
			List lst = new ArrayList();
			lst.add(vers);
			lst.add(codes);
			
			out.print(lst.toString());//[[{"id":1,"value":"ver1"},{"id":2,"value":"ver2"}], [{"id":1,"value":"code1"},{"id":2,"value":"code2"},{"id":3,"value":"code3"}]]
		}catch(Exception e) {
			log.error("异步加载行业类型出错",e);
		}
		return null;
	}