ajax传递二维数组到前台

前端之家收集整理的这篇文章主要介绍了ajax传递二维数组到前台前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第一:一维数组

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",data:{'bsChannel':bsChannel},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"},"value":"code2"},{"id":3,"value":"code3"}]]
		}catch(Exception e) {
			log.error("异步加载行业类型出错",e);
		}
		return null;
	}
原文链接:https://www.f2er.com/ajax/163711.html

猜你在找的Ajax相关文章