服务器之家

服务器之家 > 正文

springmvc和js前端的数据传递和接收方式(两种)

时间:2021-03-10 13:30     来源/作者:wushuchu

springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下

1,通过json格式传递

controller层实现如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@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端接受如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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层实现如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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端接受如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.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>");
        }
      }
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:http://blog.csdn.net/wushuchu/article/details/50235275

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部