طرق نقل البيانات بين back-end (springmvc) و front-end (js) (طريقتان)

في springmvc، يمكن نقل نتائج controller عبر json format إلى frontend JavaScript، أو يمكن نقلها عبر Map إلى frontend، والتحقيق في ذلك كما يلي

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

هذا هو نهاية محتويات هذا المقال، آمل أن تكون قد ساعدتكم في التعلم، وأتمنى أن تحصلوا على الدعم الكبير لمنصة تعليم الأنظمة.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، حقوق الطبع والتأليف تنتمي إلى مالكها، محتويات الموقع تم إدراجها من قبل مستخدمي الإنترنت بشكل تلقائي ولم يتم تعديلها بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية متعلقة بذلك. إذا رأيت محتوى يشتبه في انتهاك حقوق الطبع والتأليف، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لتقديم الشكوى، وقدم الدليل المتعلق بالدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فورًا.