springmvc和js前端的數據傳遞和接收方式

    在springmvc中controller的結果集可通過json格式傳到js前端接受,也可以通過Map傳給前端,具體實現如下


1,通過json格式傳遞

   controller層實現如下

   

 @RequestMapping("queryCityInfo")
	@ResponseBody
	public String queryCityInfo()throws Exception{
		 String provinceId = getString("id");
		 @SuppressWarnings("rawtypes")
		List cityList = personalService.queryCity(provinceId);
         if(null != cityList && cityList.size() >0 ){
        	String json = JSONUtils.toJSONString(cityList);       	
        	super.outStr(json);
         }
		return null;
	}


protected void outStr(String str)</span>
	{
		try
        {
            response.setCharacterEncoding("UTF-8");
            response.getWriter().write(str);
        }
        catch (Exception e)
        {
        }
	}
public static <T> String toJSONString(List<T> list)
	{
		JSONArray jsonArray = JSONArray.fromObject(list);
		
		return jsonArray.toString();
	}



  js端接受如下

  

function selectBankCity(id){
	
	$.ajax({
		url:baseAddress+"queryCityInfo.do?provinceId="+id,
		type:'get',
		dataType:'json',
		success:function(data){
			$('#custBankArea').empty();
			$('#custBankArea').append("<option >--請選擇城市信息--</option>");
			for(var i=0;i<data.length;i++){
				$('#custBankArea').append("<option value='"+data[i].id+"'>"+data[i].cityName+"</option>");
			}
		}
	});
}

2,通過Map傳遞

controller層實現如下

@RequestMapping("queryProvince")
	@ResponseBody
	public Map<String, Object>  queryProvince(HttpServletRequest request,HttpServletResponse response){
		Map<String, Object> map = new HashMap<String, Object>();
		try {
			@SuppressWarnings("rawtypes")
			List provinceList = personalService.queryProvince();
			if(null != provinceList && provinceList.size() >0 ){
				map.put("province", provinceList);
	        } 
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return map;
	}

js端接受如下

$.ajax({
			url:baseAddress+"queryProvince.do",
			type:"get",
			success:function(resData){
				var data = resData.province;
				for(var i=0;i<data.length;i++){
					//js實現
					//var objs = document.getElementById("cusBankCity")
					//objs.options.add(new Option(data[i].provinceName) ,data[i].id);
					//jq實現
					$("#cusBankCity").append("<option value='"+data[i].id+"'>"+data[i].provinceName+"</option>");
				}
			}
		});


   

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章