当前位置： 移动技术网 > IT编程>开发语言>Java > springmvc和js前端的数据传递和接收方式(两种)

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

2019年07月19日  | 移动技术网IT编程  | 我要评论

在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>"); 
        } 
      } 
    });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网