springmvc 返回json数据给前台jsp页面展示
spring mvc返回json字符串的方式
方案一：使用@ResponseBody 注解返回响应体 直接将返回值序列化json
优点：不需要自己再处理
步骤一：在spring-servlet.xml文件中配置如下代码
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:p="http://www.springframework.org/schema/p"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd "><span style="color: #008000"><!--</span><span style="color: #008000">使用Annotation方式 完成映射 </span><span style="color: #008000">--></span></br>
<span style="color: #008000"><!--</span><span style="color: #008000">让spring扫描包下所有的类，让标注spring注解的类生效 </span><span style="color: #008000">--></span></br>
<span style="color: #0000ff"><</span><span style="color: #800000">context:component-scan </span><span style="color: #ff0000">base-package</span><span style="color: #0000ff">="cn.yxj.controller"</span><span style="color: #0000ff">/></span></br>
<span style="color: #0000ff"><</span><span style="color: #800000">mvc:annotation-driven</span><span style="color: #0000ff">/></span> </br>
<span style="color: #008000"><!--</span><span style="color: #008000">视图解析器 </span><span style="color: #008000">--></span></br>
<span style="color: #0000ff"><</span><span style="color: #800000">bean </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="org.springframework.web.servlet.view.InternalResourceViewResolver"</span><span style="color: #0000ff">></span></br>
<span style="color: #0000ff"><</span><span style="color: #800000">property </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="prefix"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="/WEB-INF/jsp/"</span><span style="color: #0000ff">></</span><span style="color: #800000">property</span><span style="color: #0000ff">></span></br>
<span style="color: #0000ff"><</span><span style="color: #800000">property </span><span style="color: #ff0000">name</span><span style="color: #0000ff">="suffix"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">=".jsp"</span><span style="color: #0000ff">></</span><span style="color: #800000">property</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"></</span><span style="color: #800000">bean</span><span style="color: #0000ff">></span></br>
</beans>
步骤二：在处理器方法中打上@ResponseBody 标签
@RequestMapping(value="/hello5.do")
@ResponseBody
public String hello(HttpServletResponse response) throws IOException{
UserInfo u1=new UserInfo();
u1.setAge(15);
u1.setUname("你好");UserInfo u2</span>=<span style="color: #0000ff">new</span><span style="color: #000000"> UserInfo();</br>
u2.setAge(</span>152<span style="color: #000000">);</br>
u2.setUname(</span>"你好2"<span style="color: #000000">);</br>
Map</span><String,UserInfo> map=<span style="color: #0000ff">new</span> HashMap<String, UserInfo><span style="color: #000000">();</br>
map.put(</span>"001"<span style="color: #000000">, u1);</br>
map.put(</span>"002"<span style="color: #000000">, u2);</br>
String jsonString </span>=<span style="color: #000000"> JSON.toJSONString(map);</br>
</span><span style="color: #0000ff">return</span><span style="color: #000000"> jsonString;</br>
}</span></pre>
步骤三：使用ajax进行获取数据
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>My JSP 'index.jsp' starting page<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span></br></br> <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="js/jquery-1.8.3.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span></br>
<span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #000000"></br>
$(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){
$(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">#btn</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">).click(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){</br>
$.ajax({</br>
url:</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000"><%=path%>/Five.do</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</br>
success:</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(data){ </br>
</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">解析对象</span></br>
<span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">alert(data.uname+"\n"+data.age);</span></br>
<span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">解析map</span></br>
<span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">alert(data.info.age+"\n"+data.info.uname);</span></br>
<span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">解析list</span></br>
$.each(data,function(i,dom){
alert(dom.uname+"\n"+dom.age);
});
}
});
});
});
</script>
</head><body>
<input type="button" value="ajax" id="btn"/></body>
</html>
方案二：处理器方法的返回值---Object
由于返回Object数据，一般都是将数据转化为JSON对象后传递给浏览器页面的，而这个由Object转换为Json，是由Jackson工具完成的，所以要导入jar包，将Object数据转化为json数据，需要Http消息
转换器 HttpMessageConverter完成。而转换器的开启，需要由<mvc:annotation-driven/> 来完成，当spring容器进行初始化过程中，在<mvc:annotation-driven/> 处创建注解驱动时，默认创
建了七个HttpMessageConverter对象，也就是说，我们注册<mvc:annotation-driven/>，就是为了让容器帮我们创建HttpMessageConverter对象
详细代码看
方案二、使用返回字符串的处理器方法，去掉@ResponseBody注解
步骤一、同上
步骤二
@RequestMapping(value="/hello5.do")
public String hello(HttpServletResponse response) throws IOException{
UserInfo u1=new UserInfo();
u1.setAge(15);
u1.setUname("你好");UserInfo u2</span>=<span style="color: #0000ff">new</span><span style="color: #000000"> UserInfo();</br>
u2.setAge(</span>152<span style="color: #000000">);</br>
u2.setUname(</span>"你好2"<span style="color: #000000">);</br>
Map</span><String,UserInfo> map=<span style="color: #0000ff">new</span> HashMap<String, UserInfo><span style="color: #000000">();</br>
map.put(</span>"001"<span style="color: #000000">, u1);</br>
map.put(</span>"002"<span style="color: #000000">, u2);</br>
String jsonString </span>=<span style="color: #000000"> JSON.toJSONString(map);</br>
</span><span style="color: #0000ff">return</span><span style="color: #000000"> jsonString;</br>
}</span></pre>
步骤三、在前台取值的时候需要我么做一遍处理
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><span style="color: #0000ff"><</span><span style="color: #800000">title</span><span style="color: #0000ff">></span>My JSP 'index.jsp' starting page<span style="color: #0000ff"></</span><span style="color: #800000">title</span><span style="color: #0000ff">></span></br></br> <span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="js/jquery-1.8.3.js"</span><span style="color: #0000ff">></</span><span style="color: #800000">script</span><span style="color: #0000ff">></span>
<span style="color: #0000ff"><</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #000000"></br>
$(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){</br>
$(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">#btn</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">).click(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){</br>
$.ajax({</br>
url:</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000"><%=path%>/hello5.do</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">,</br>
success:</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(data){ </span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">data指的是从server打印到浏览器的数据</span></br>
<span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">jsonString jsonObject</span></br>
<span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000">{"001":{"age":122,"name":"顺利就业"}}</span></br>
<span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> result</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> eval(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">data</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">)</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);</br>
$.each(result,</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(i,dom){</br>
alert(dom.age</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">\n</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">dom.uname);</br> });</br>
</span><span style="background-color: #f5f5f5; color: #008000">//</span><span style="background-color: #f5f5f5; color: #008000"> alert(result["001"]["age"]);</span>
}
});
});
});
</script>
</head><body>
<input type="button" value="ajax" id="btn"/></body>
</html>
方案三：使用无返回值的处理器方法
步骤一：同上
步骤二：使用响应流回送数据
@RequestMapping(value="/hello5.do")
public void hello(HttpServletResponse response) throws IOException{
UserInfo u1=new UserInfo();
u1.setAge(15);
u1.setUname("你好");UserInfo u2</span>=<span style="color: #0000ff">new</span><span style="color: #000000"> UserInfo();</br>
u2.setAge(</span>152<span style="color: #000000">);</br>
u2.setUname(</span>"你好2"<span style="color: #000000">);</br>
Map</span><String,UserInfo> map=<span style="color: #0000ff">new</span> HashMap<String, UserInfo><span style="color: #000000">();</br>
map.put(</span>"001"<span style="color: #000000">, u1);</br>
map.put(</span>"002"<span style="color: #000000">, u2);</br>
String jsonString </span>=<span style="color: #000000"> JSON.toJSONString(map);</br>
response.setCharacterEncoding(</span>"utf-8"<span style="color: #000000">);
response.getWriter().write(jsonString);</br>
response.getWriter().close();</br>
</br>
}</span></pre>
步骤三：在前台取值也需要做处理
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title></br></br> <script type="text/javascript" src="js/jquery-1.8.3.js"></script></br>
<script type="text/javascript"><span style="color: #000000">
$(function(){</br>
$(</span>"#btn"<span style="color: #000000">).click(function(){</br>
$.ajax({</br>
url:</span>"<%=path%>/hello5.do"<span style="color: #000000">,
success:function(data){ </span><span style="color: #008000">//</span><span style="color: #008000">data指的是从server打印到浏览器的数据</br>
</span><span style="color: #008000">//</span><span style="color: #008000">jsonString jsonObject</br>
</span><span style="color: #008000">//</span><span style="color: #008000">{"001":{"age":122,"name":"顺利就业"}}</span></br>
var result= eval("("+data+")"<span style="color: #000000">);</br>
$.each(result,function(i,dom){</br>
alert(dom.age</span>+"\n"+<span style="color: #000000">dom.uname);</br>
</br>
});</br>
</span><span style="color: #008000">//</span><span style="color: #008000"> alert(result["001"]["age"]);</span></br>
}
});
});
});
</script>
</head><body>
<input type="button" value="ajax" id="btn"/></body>
</html>
springmvc 返回json数据给前台jsp页面展示的更多相关文章
- 【Spring学习笔记-MVC-4】SpringMVC返回Json数据-方式2
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
- 【Spring学习笔记-MVC-3】SpringMVC返回Json数据-方式1
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
- 【Spring学习笔记-MVC-3.1】SpringMVC返回Json数据-方式1-扩展
<Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...
- SpringMVC返回JSON数据时日期格式化问题
https://dannywei.iteye.com/blog/2022929 SpringMVC返回JSON数据时日期格式化问题 博客分类: Spring 在运用SpringMVC框架开发时,可 ...
- springMVC返回json数据乱码问题及@RequestMapping 详解
原文地址:https://blog.csdn.net/u010127245/article/details/51774074 一.@RequestMapping RequestMapping是一个用来 ...
- springMVC返回json数据乱码问
在springMVC controller中返回json数据出现乱码问题,因为没有进行编码,只需要简单的注解就可以了 在@RequestMapping()中加入produces="text/ ...
- SpringMVC——返回JSON数据&&文件上传下载
--------------------------------------------返回JSON数据------------------------------------------------ ...
- 关于springmvc 返回json数据null字段的显示问题-转https://blog.csdn.net/qq_23911069/article/details/62063450
最近做项目(ssm框架)的时候,发现从后台返回的json(fastjson)数据对应不上实体类,从数据库查询的数据,如果对应的实体类的字段没有信息的话,json数据里面就不显示,这不是我想要的结果,准 ...
- Response返回JSON数据到前台页面
转自博文:<Response JSON数据返回>http://blog.csdn.net/anialy/article/details/8665471 简述: 在servlet填充Resp ...
随机推荐
- Oracle中给表主键、外键收集
1.创建表的同时创建主键约束 (1)无命名 create table student ( studentid int primary key not null, studentname varchar ...
- JavaScript 中的多线程通信的方法
在Html 5诞生之后,我们可以使用javascript来实现多线程处理.H5 新增了一个web workers api,使用这个API,用户可以很容易地创建在后台运行的线程,H5 中被称为workd ...
- webpack学习之——Entry Points(入口起点)
1.Entry property(entry属性) 1.1 Single Entry (Shorthand) Syntax(单个入口语法) 用法:entry: string | Array<st ...
- Codeforces Round #192 (Div. 2) A. Cakeminator【二维字符数组/吃掉cake,并且是一行或者一列下去，但是该行/列必须没有草莓的存在】
A. Cakeminator time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- 手把手0基础项目实战（一）——教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)...
原文:手把手0基础项目实战(一)--教你搭建一套可自动化构建的微服务框架(SpringBoot+Dubbo+Docker+Jenkins)... 本文你将学到什么? 本文将以原理+实战的方式,首先对& ...
- vue中 表头 th 合并单元格，且表格列数不定的动态渲染方法
吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...
- 阿里云MVP北京闭门会圆满落幕 多把“利剑”助力开发者破阵蜕变
摘要: 从传统制造业到新零售,从人工智能到新金融,阿里云MVP正在成为中国乃至全球各行各业数字化转型的中坚力量.当这群技术先锋者与阿里核心技术力量汇聚在一起,一场无与伦比的思想碰撞就此展开. 3月21 ...
- MySQL数据库操作语句(补充1)（cmd环境运行）
一.字符串类型 enum枚举类型 /* 也叫做枚举类型,类似于单选! 如果某个字段的值只能从某几个确定的值中进行选择,一般就使用enum类型, 在定义的时候需要将该字段所有可能的选项都罗列出来: */ ...
- PHP生成唯一的促销/优惠/折扣码,由字母和数字组成。
首先我们先搞清楚什么是促销/优惠/折扣码?它有什么用作: 每一个电子商务网站,现在有一种或多种类型的优惠/折扣/优惠券系统,给大家分享一下如何在PHP生成唯一的促销/折扣码.主要是实现一个优惠码系统, ...
- laravel 项目本地版本为5.5,线上mysql 为5.7.21版本，执行严格模式
看到网上很多说修改 但是在mysql 5.7中没有这个参数设置,故放弃: 结合本项目sina_id 10位超过int的最大范围4294967295,所以报错,修改为bigint 即可.