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

2024-10-16 06:48:46

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

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

Spring MVC参数传递中文乱码解决方法分享

概述中国特色社会主义乱码问题是我们经常会碰到的问题,解决的办法有很多,本文分别介绍了GET方式和POST方式中文乱码解决方案中一劳永逸的办法. GET提交中文乱码解决方案在乱码的Controller文件中采用下面的方法将编码转换成UTF-8 String str = new String(request.getParameter("参数名").getBytes("iso-8859-1"), "utf-8"); 修改项目所在的Tomcat服务器
SpringMVC 传日期参数到后台的实例讲解

1.注解方式,在controller层通过initBinder注解实现 @InitBinder public void initBinder(HttpServletRequest request,ServletRequestDataBinder binder)throws Exception { DateFormat fmt = new SimpleDateFormat("yyyy-MM-dd"); CustomDateEditor dateEditor = new CustomDat
spring mvc实现文件上传与下载功能

本文实例为大家分享了spring mvc实现文件上传与下载功能的具体代码,供大家参考,具体内容如下文件上传在pom.xml中引入spring mvc以及commons-fileupload的相关jar  <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <v
Spring MVC项目中log4J和AOP使用详解

前言日志处理是每个项目当中一个非常重要的内容.没有了日志,也就失去了对系统的可控性.没有日志,系统出现任何问题,都会没有踪迹可寻,这对一个信息系统而言是非常危险的. 项目中需要将service中的类方法的调用过程,使用log4j日志记录. service中的类和方法都很多,不可能在每个类中单独添加log4j日志记录的功能,因此我们在这里使用AOP的思想进行横向切面. 以service类中的方法为切入点,通过AOP在方法调用前后使用log4j输出日志,内容包括正在调用的类和方法名. 在配置过程中
springmvc用于方法鉴权的注解拦截器的解决方案代码

最近在用SpringMvc写项目的时候,遇到一个问题,就是方法的鉴权问题,这个问题弄了一天了终于解决了,下面看下解决方法项目需求:需要鉴权的地方,我只需要打个标签即可,比如只有用户登录才可以进行的操作,一般情况下我们会在执行方法时先对用户的身份进项校验,这样无形中增加了非常大的工作量,重复造轮子,有了java注解只需要在需要鉴权的方法上面打个标签即可: 解决方案: 1.首先创建一个注解类: @Documented @Inherited @Target({ElementType.METHOD,E
springMVC前台传数组类型,后台用list类型接收实例代码

springMVC后台处理数组对象. list类型的参数,接收前台的数组值,实验了一下,结果还真可以. 不用绑定到对象里面. 当然我这个是前台传递了个包含的是string的数组到后台,然后,后台用list来接收. 具体如下: 前台代码: //发送请求到后台,带数组形式的数据. function testList() { var data = getTreeViewCheckedData(); $.ajax({ url: APP_NAME + "xxxx/testList", data:
自定义spring mvc的json视图实现思路解析

场景我们团队现在面临着多端数据接口对接的问题,为了解决这个问题我们定义了接口对接的规范, 前端(安卓,Ios,web前端)和后端进行了数据的格式规范的讨论,确定了json的数据格式: { "code":"200", "data":{"":""}, "message":"处理成功" } { "code":"300", "
详解手把手Maven搭建SpringMVC+Spring+MyBatis框架(超级详细版)

SSM(Spring+SpringMVC+Mybatis),目前较为主流的企业级架构方案.标准的MVC设计模式,将整个系统划分为显示层.Controller层.Service层.Dao层四层,使用SpringMVC负责请求的转发和视图管理,Spring实现业务对象管理, MyBatis作为数据对象持久化引擎. 一. 框架详情 Spring是一个轻量级的Java开发框架,它是为了解决企业应用开发的复杂性而创建的.Spring的用途不仅限于服务器端的开发.从简单性.可测试性和松耦合的角度而言,任何J
springmvc和js前端的数据传递和接收方式(两种)

在springmvc中controller的结果集可通过json格式传到js前端接受,也可以通过Map传给前端,具体实现如下 1,通过json格式传递 controller层实现如下 @RequestMapping("queryCityInfo") @ResponseBody public String queryCityInfo()throws Exception{ String provinceId = getString("id"); @SuppressWar
Vue 父子组件实现数据双向绑定效果的两种方式(案例代码)

目录方式一:通过监听事件实现方式二:通过 v-model 实现方式一:通过监听事件实现父组件将数据传递给子组件通过 props 实现:而子组件将数据传递给父组件通过事件来实现,在子组件中定义一个事件,在该事件中传递值,由父组件中监听这个事件.通过这种方式实现父子组件双向绑定的效果最常见. 子组件案例代码: <template> <el-select v-model="value" placeholder="请选择" @change=&quo
js删除Array数组中指定元素的两种方法

本节内容: js删除Array数组中指定元素方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=
Docker中数据卷(volume)管理的两种方式

上篇文章给大家介绍过 docker基础知识之挂载本地目录的方法 ,今天给大家介绍Docker中数据卷(volume)管理的两种方式,具体内容如下所示: 什么是数据卷数据卷( volume ):volume是存在于一个或多个容器中的特定文件或文件夹,这个目录以独立于联合文件系统的形式在宿主机中存在,并为数据的共享与持久化提供便利. 为什么要用数据卷 Docker分层文件系统存在的问题: Docker的镜像是由一系列的只读层组合而来的,当启动一个容器时, Docker加载镜像的所有只读层,并在最上
springMVC如何将controller中数据传递到jsp页面

1> 将方法的返回值该为ModelAndView在返回时,将数据存储在ModelAndView对象中如: newModelAndView("/WEBINF/jsp/showData.jsp","message",message) 其中第一个参数为url,第二个参数为要传递的数据的key,第三个参数为数据对象. 在这里要注意的是数据是默认被存放在request中的. 示例: @RequestMapping(value="/mad/showData_1
Vue发送Formdata数据及NodeJS接收方式

目录 Vue发送Formdata数据 NodeJS后台接收查看FormData里的值 Vue发送Formdata数据参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的. 具体使用方法,参考此链接地址 // 这里我使用的是cropperjs插件,裁剪图片成功执行此方法 crop(blob) { const formData = new FormData(); let uid = this.$store.getter
JSP对浏览器发送来的数据进行重新编码的两种方式

最近做的DRP项目中,使用JSP操作中文时,经常会出现一些乱码问题.这些问题导致中文无法输入,或者是无法正常显示.这里就涉及到了字符集的设置.字符集的编码方式. 在JSP/Servlet中主要有以下几个地方可以设置编码,pageEncoding="GB18030",contentType="text/html;charset=GB18030".request.setCharacterEncoding("GB18030")和 response.se
把excel表格里的数据导入sql数据库的两种方法

本来最近在研究微信公众平台的,老大临时交我个任务,把excel表格里的数据导入sql数据库,我想这so easy嘛. 没想都在上面消磨了两天... 把情况介绍下:在数据库中有如下这样结构的表(A表) 我只取关键的及列里面还有很多数据. 有一张id和name对照的excel文件(B表)和N张结构类似的excel表(C表)(没有id那一列) 我的任务在B表中找到C表中数据对应的id后,然后将id加到C表中,最后根据id是唯一的,用C表的数据去更新A表的数据.这里主要涉及了e
解决css和js的{}与smarty定界符冲突问题的两种方法

当输入url地址后网页出现:Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "E:\wamp\www\cms\system/templates/index.html" on line 79 "$("#job").load("./system/templates/touch/test.php",
js 图片转base64的方式(两种)

方式一:Blob和FileReader 对象实现原理: 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"] 使用FileReader 对象接收blob <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&quo

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

相关推荐

随机推荐