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

1,通过json格式传递

controller层实现如下

  1. @RequestMapping("queryCityInfo")
  2. @ResponseBody
  3. public String queryCityInfo()throws Exception{
  4. String provinceId = getString("id");
  5. @SuppressWarnings("rawtypes")
  6. List cityList = personalService.queryCity(provinceId);
  7. if(null != cityList && cityList.size() >0 ){
  8. String json = JSONUtils.toJSONString(cityList);
  9. super.outStr(json);
  10. }
  11. return null;
  12. }
  13. protected void outStr(String str)</span>
  14. {
  15. try
  16. {
  17. response.setCharacterEncoding("UTF-8");
  18. response.getWriter().write(str);
  19. }
  20. catch (Exception e)
  21. {
  22. }
  23. }
  24. public static <T> String toJSONString(List<T> list)
  25. {
  26. JSONArray jsonArray = JSONArray.fromObject(list);
  27. return jsonArray.toString();
  28. }

js端接受如下

  1. function selectBankCity(id){
  2. $.ajax({
  3. url:baseAddress+"queryCityInfo.do?provinceId="+id,
  4. type:'get',
  5. dataType:'json',
  6. success:function(data){
  7. $('#custBankArea').empty();
  8. $('#custBankArea').append("<option >--请选择城市信息--</option>");
  9. for(var i=0;i<data.length;i++){
  10. $('#custBankArea').append("<option value='"+data[i].id+"'>"+data[i].cityName+"</option>");
  11. }
  12. }
  13. });
  14. }

2,通过Map传递

controller层实现如下

  1. @RequestMapping("queryProvince")
  2. @ResponseBody
  3. public Map<String, Object>  queryProvince(HttpServletRequest request,HttpServletResponse response){
  4. Map<String, Object> map = new HashMap<String, Object>();
  5. try {
  6. @SuppressWarnings("rawtypes")
  7. List provinceList = personalService.queryProvince();
  8. if(null != provinceList && provinceList.size() >0 ){
  9. map.put("province", provinceList);
  10. }
  11. } catch (Exception e) {
  12. // TODO Auto-generated catch block
  13. e.printStackTrace();
  14. }
  15. return map;
  16. }

js端接受如下

    1. $.ajax({
    2. url:baseAddress+"queryProvince.do",
    3. type:"get",
    4. success:function(resData){
    5. var data = resData.province;
    6. for(var i=0;i<data.length;i++){
    7. //js实现
    8. //var objs = document.getElementById("cusBankCity")
    9. //objs.options.add(new Option(data[i].provinceName) ,data[i].id);
    10. //jq实现
    11. $("#cusBankCity").append("<option value='"+data[i].id+"'>"+data[i].provinceName+"</option>");
    12. }
    13. }
    14. });

springmvc和js前端的数据传递和接收方式的更多相关文章

  1. SpringMVC -- 梗概--源码--壹--数据传递

    附:实体类 Class : User package com.c61.entity; import java.text.SimpleDateFormat; import java.util.Date; ...

  2. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  3. SpringMvc+ajax 实现json格式数据传递

    传JSON对象 前端 function test () { var param = {username : "yitop"}; $.ajax({ timeout : 20000, ...

  4. angular js 指令的数据传递 及作用域数据绑定

    <div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...

  5. js前端获取页面传递的参数

    转载的,先记下: UrlParm = function () { // url参数 var data, index; (function init() { data = []; index = {}; ...

  6. 【Android学习】数据传递三种方式

    1.Application 注意在清单文件中的Application节点下注册android:name属性, 继承Application类,重写onCreate方法, 使用数据时,实例化自定义类时需要 ...

  7. api拆分(数据传递和接收的几种方式)

    传递方式一:对象转String 接收:String类型接收再转对象 传递方式二:Map 接收:Map 传递方式三:json(Map转json) 接收:String转Map 传递方式四:Map里放jso ...

  8. 前端mock数据的几种方式

    方式 备注 本地php服务架设 直接输出json 使用在线mock服务 如easyMock.apizza.Rap1\2 , 可以远程协作  本地node服务:koa+mongodb    本地node ...

  9. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

随机推荐

  1. LeetCode 315. Count of Smaller Numbers After Self

    原题链接在这里:https://leetcode.com/problems/count-of-smaller-numbers-after-self/ 题目: You are given an inte ...

  2. Unity3D研究院之Assetbundle的原理(六十一)

    www.xuanyusong.com/archives/2373 Assetbundle 是Unity Pro提供提供的功能,它可以把多个游戏对象或者资源二进制文件封装到Assetbundle中,提供 ...

  3. (C#)Windows Shell 外壳编程系列2 - 解释,从“桌面”开始展开

    (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一篇:(C#)Windows Shell 外壳编程系列1 - 基础,浏览一个文件夹 让我们详细解释一下 Shell 编程中最基本 ...

  4. Sqoop--Free-form Query Imports 自由查询模式下$CONDITIONS关键字的作用

    Scoop是用来实现HDFS文件系统和关系型数据库如MySQL之间数据传输和转换的工具. 从MySQL导出到HDFS可以通过--table, --columns and --where等设置数据抽出的 ...

  5. WebDriver测试web中遇到的弹出框或不确定的页面

    我自己是用try catch解决的,不知道其他人的解决方法?如有,可以留言

  6. PostgreSQL本地化

    从管理员的角度描述可用的本地化特性.PostgreSQL支持两种本地化方法:利用操作系统的区域(locale)特性,提供对区域相关的排序顺序.数字格式. 翻译过的信息和其它方面.提供一些不同的字符集来 ...

  7. web基础 (二) html标签

    一.html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 浏览器按顺序渲染网页文件,然 ...

  8. c# webapi2 实用详解

    本文介绍webapi的使用知识 发布webapi的问题 配置问题 webapi的项目要前端访问,需要在web.config配置文件中添加如下配置 在system.webServer节点下面添加 < ...

  9. delphi 组件安装工具开发

    当一个组件的dpk文件数量较多且安装工具不顺手的时候,写一个属于自己的组件安装工具就很有必要了. 本例以 Dev Express 16.1.2 为例,设计一个组件安装工具,以便更深入理解 delphi ...

  10. delphi 安卓配置教程

    本教程以 delphi 10.2.2.2004 为例,演示 delphi 安卓配置步骤 1.打开 Android Tools 2. 选择合适的版本.比如:我的小米4 LTE 是 andorid 6.0 ...