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 "
>

<!--使用Annotation方式 完成映射 -->

<!--让spring扫描包下所有的类,让标注spring注解的类生效 -->

<context:component-scan base-package="cn.yxj.controller"/>

<mvc:annotation-driven/>

<!--视图解析器 -->

<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">

<property name="prefix" value="/WEB-INF/jsp/"></property>

<property name="suffix" value=".jsp"></property>
</bean>

</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=new UserInfo();

u2.setAge(
152);

u2.setUname(
"你好2");

Map
<String,UserInfo> map=new HashMap<String, UserInfo>();

map.put(
"001", u1);

map.put(
"002", u2);

String jsonString
= JSON.toJSONString(map);

return jsonString;

}

复制代码

步骤三:使用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%>">

<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(
function(){
$(
"#btn").click(function(){

$.ajax({

url:
"<%=path%>/Five.do",

success:
function(data){

//解析对象

//alert(data.uname+"\n"+data.age);

//解析map

//alert(data.info.age+"\n"+data.info.uname);

//解析list

$.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=new UserInfo();

u2.setAge(
152);

u2.setUname(
"你好2");

Map
<String,UserInfo> map=new HashMap<String, UserInfo>();

map.put(
"001", u1);

map.put(
"002", u2);

String jsonString
= JSON.toJSONString(map);

return jsonString;

}

复制代码

步骤三、在前台取值的时候需要我么做一遍处理

复制代码
<%@ 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>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">

$(
function(){

$(
"#btn").click(function(){

$.ajax({

url:
"<%=path%>/hello5.do",

success:
function(data){ //data指的是从server打印到浏览器的数据

//jsonString jsonObject

//{"001":{"age":122,"name":"顺利就业"}}

var result= eval("("+data+")");

$.each(result,
function(i,dom){

alert(dom.age
+"\n"+dom.uname);

});

// alert(result["001"]["age"]);
}

});

});

});

</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=new UserInfo();

u2.setAge(
152);

u2.setUname(
"你好2");

Map
<String,UserInfo> map=new HashMap<String, UserInfo>();

map.put(
"001", u1);

map.put(
"002", u2);

String jsonString
= JSON.toJSONString(map);

response.setCharacterEncoding(
"utf-8");
response.getWriter().write(jsonString);

response.getWriter().close();



}

复制代码

步骤三:在前台取值也需要做处理

复制代码
<%@ 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>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">
$(function(){

$(
"#btn").click(function(){

$.ajax({

url:
"<%=path%>/hello5.do",
success:function(data){
//data指的是从server打印到浏览器的数据

//jsonString jsonObject

//{"001":{"age":122,"name":"顺利就业"}}

var result= eval("("+data+")");

$.each(result,function(i,dom){

alert(dom.age
+"\n"+dom.uname);



});

// alert(result["001"]["age"]);

}

});
});
});
</script>

</head>

<body>

<input type="button" value="ajax" id="btn"/>

</body>

</html>

复制代码

 

posted @ 2018-04-26 11:35  星朝  阅读(7757)  评论(1)    收藏  举报