服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|JAVA教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|JavaScript|易语言|

服务器之家 - 编程语言 - JAVA教程 - springmvc和js前端的数据传递和接收方式(两种)

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

2021-03-10 13:30wushuchu JAVA教程

本文介绍了springmvc和js前端的数据传递和接收方式(两种),详细的介绍了两种方式,一种是json格式传递,另一种是Map传递,具有一定的参考价值,有兴趣的可以了解一下

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

延伸 · 阅读

精彩推荐