springmvc 返回json數據給前台jsp頁面展示

本文轉載自查看原文 2018-04-26 11:35 4953 SpringMVC

　　　　　　　　　　　　　　　　　　　　　　　　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">&lt;!--</span><span style="color: #008000">使用Annotation方式 完成映射  </span><span style="color: #008000">--&gt;</span></br>
 <span style="color: #008000">&lt;!--</span><span style="color: #008000">讓spring掃描包下所有的類，讓標注spring注解的類生效  </span><span style="color: #008000">--&gt;</span></br>
 <span style="color: #0000ff">&lt;</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">/&gt;</span></br>
 <span style="color: #0000ff">&lt;</span><span style="color: #800000">mvc:annotation-driven</span><span style="color: #0000ff">/&gt;</span>  </br>
 <span style="color: #008000">&lt;!--</span><span style="color: #008000">視圖解析器  </span><span style="color: #008000">--&gt;</span></br>
 <span style="color: #0000ff">&lt;</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">&gt;</span></br>
 <span style="color: #0000ff">&lt;</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">&gt;&lt;/</span><span style="color: #800000">property</span><span style="color: #0000ff">&gt;</span></br>
 <span style="color: #0000ff">&lt;</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">&gt;&lt;/</span><span style="color: #800000">property</span><span style="color: #0000ff">&gt;</span>
 <span style="color: #0000ff">&lt;/</span><span style="color: #800000">bean</span><span style="color: #0000ff">&gt;</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>&lt;String,UserInfo&gt; map=<span style="color: #0000ff">new</span> HashMap&lt;String, UserInfo&gt;<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">&lt;</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span>My JSP 'index.jsp' starting page<span style="color: #0000ff">&lt;/</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span></br></br>

<span style="color: #0000ff">&lt;</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">&gt;&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span></br>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">&gt;</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">&lt;%=path%&gt;/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>&lt;String,UserInfo&gt; map=<span style="color: #0000ff">new</span> HashMap&lt;String, UserInfo&gt;<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">&lt;</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span>My JSP 'index.jsp' starting page<span style="color: #0000ff">&lt;/</span><span style="color: #800000">title</span><span style="color: #0000ff">&gt;</span></br></br>

<span style="color: #0000ff">&lt;</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">&gt;&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">&gt;</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">&lt;%=path%&gt;/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>&lt;String,UserInfo&gt; map=<span style="color: #0000ff">new</span> HashMap&lt;String, UserInfo&gt;<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%>">


&lt;title&gt;My JSP 'index.jsp' starting page&lt;/title&gt;</br></br>

&lt;script type="text/javascript" src="js/jquery-1.8.3.js"&gt;&lt;/script&gt;</br>
&lt;script type="text/javascript"&gt;<span style="color: #000000">
  $(function(){</br>
     $(</span>"#btn"<span style="color: #000000">).click(function(){</br>
         $.ajax({</br>
           url:</span>"&lt;%=path%&gt;/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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Response返回JSON數據到前台頁面 SpringMVC：前台jsp頁面和后台傳值 SpringMVC返回數據給jsp頁面（EL表達式取值） SpringMVC返回數據到頁面 java傳遞json數據到前台jsp SpringMVC向前台傳輸 JSON數據 SpringMVC接收前台Ajax傳送json數據前台如何處理后台返回的json數據【SpringMVC學習09】SpringMVC與前台的json數據交互（轉）SpringMVC學習(十)——SpringMVC與前台的json數據交互