springmvc 返回json數據給前臺jsp頁面展現

<div id="cnblogs_post_body" class="blogpost-body"><p>　　　　　　　　　　　　　　　　　　　　　　　　<strong>spring mvc返回json字符串的方式</strong></p> <p><strong>方案一：使用<strong>@ResponseBody&nbsp;</strong>註解返回響應體 直接將返回值序列化json</strong></p> <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 優勢：不須要本身再處理</strong></p> <p><strong>步驟一：在spring-servlet.xml文件中配置以下代碼</strong></p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre><span style="color: #0000ff">&lt;?</span><span style="color: #ff00ff">xml version="1.0" encoding="UTF-8"</span><span style="color: #0000ff">?&gt;</span> <span style="color: #0000ff">&lt;</span><span style="color: #800000">beans </span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://www.springframework.org/schema/beans"</span><span style="color: #ff0000"></br> xmlns:xsi</span><span style="color: #0000ff">="http://www.w3.org/2001/XMLSchema-instance"</span><span style="color: #ff0000"></br> xmlns:p</span><span style="color: #0000ff">="http://www.springframework.org/schema/p"</span><span style="color: #ff0000"></br> xmlns:mvc</span><span style="color: #0000ff">="http://www.springframework.org/schema/mvc"</span><span style="color: #ff0000"></br> xmlns:context</span><span style="color: #0000ff">="http://www.springframework.org/schema/context"</span><span style="color: #ff0000"></br> xsi:schemaLocation</span><span style="color: #0000ff">="</br> http://www.springframework.org/schema/beans</br> http://www.springframework.org/schema/beans/spring-beans.xsd</br> http://www.springframework.org/schema/context</br> http://www.springframework.org/schema/context/spring-context.xsd</br> http://www.springframework.org/schema/mvc</br> http://www.springframework.org/schema/mvc/spring-mvc.xsd "</span><span style="color: #0000ff">&gt;</span></br>

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

<span style="color: #0000ff"></</span><span style="color: #800000">beans</span><span style="color: #0000ff">></span></pre>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p>步驟二：在處理器方法中打上<strong>@ResponseBody&nbsp;&nbsp;</strong>標籤</p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre>@RequestMapping(value="/hello5.do"<span style="color: #000000">)</br> @ResponseBody</br> </span><span style="color: #0000ff">public</span> String hello(HttpServletResponse response) <span style="color: #0000ff">throws</span><span style="color: #000000"> IOException{</br> UserInfo u1</span>=<span style="color: #0000ff">new</span><span style="color: #000000"> UserInfo();</br> u1.setAge(</span>15<span style="color: #000000">);</br> u1.setUname(</span>"你好"<span style="color: #000000">);</br></br>

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>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p>步驟三：使用ajax進行獲取數據</p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre><span style="background-color: #ffff00; color: #000000">&lt;%</span><span style="background-color: #f5f5f5; color: #000000">@ page language</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">java</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000"> import</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">java.util.*</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000"> pageEncoding</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">utf-8</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #ffff00; color: #000000">%&gt;</span> <span style="background-color: #ffff00; color: #000000">&lt;%</span></br> <span style="background-color: #f5f5f5; color: #0000ff">String</span><span style="background-color: #f5f5f5; color: #000000"> path </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> request.getContextPath();</br> </span><span style="background-color: #f5f5f5; color: #0000ff">String</span><span style="background-color: #f5f5f5; color: #000000"> basePath </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> request.getScheme()</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">://</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">request.getServerName()</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">:</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">request.getServerPort()</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">path</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">/</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000">; </span><span style="background-color: #ffff00; color: #000000">%&gt;</span></br></br>

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"><</span><span style="color: #800000">base </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="<%=basePath%>"</span><span style="color: #0000ff">></span></br></br>

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

<span style="background-color: #f5f5f5; color: #000000"> $.each(data,</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(i,dom){</br> alert(dom.uname</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.age);</br> });</br> }</br> }); });</br> });</br> </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">head</span><span style="color: #0000ff">></span></br></br>

<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="ajax"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="btn"</span><span style="color: #0000ff">/></span></br>

<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span></pre>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p><strong>方案二：處理器方法的返回值---Object</strong></p> <p><strong>　　因爲返回Object數據，通常都是將數據轉化爲JSON對象後傳遞給瀏覽器頁面的，而這個由Object轉換爲Json，是由Jackson工具完成的，因此要導入jar包，將Object數據轉化爲json數據，須要Http消息</strong></p> <p><strong>　　轉換器&nbsp;HttpMessageConverter完成。而轉換器的開啓，須要由&lt;mvc:annotation-driven/&gt;&nbsp;來完成，當spring容器進行初始化過程當中，在&lt;mvc:annotation-driven/&gt;&nbsp;處建立註解驅動時，默認創</strong></p> <p><strong>　　建了七個<strong>HttpMessageConverter對象，也就是說，咱們註冊<strong>&lt;mvc:annotation-driven/&gt;</strong>，就是爲了讓容器幫咱們建立<strong><strong>HttpMessageConverter對象</strong></strong></strong></strong></p> <p><strong><strong><strong><strong><img src="https://images2015.cnblogs.com/blog/803693/201612/803693-20161212111301979-898275310.png" alt=""></strong></strong></strong></strong></p> <p>&nbsp;</p> <p><strong>詳細代碼看</strong></p> <p><strong>方案2、使用返回字符串的處理器方法，去掉@ResponseBody註解</strong></p> <p>步驟1、同上</p> <p>步驟二</p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre>@RequestMapping(value="/hello5.do"<span style="color: #000000">)</br> </span><span style="color: #0000ff">public</span> String hello(HttpServletResponse response) <span style="color: #0000ff">throws</span><span style="color: #000000"> IOException{</br> UserInfo u1</span>=<span style="color: #0000ff">new</span><span style="color: #000000"> UserInfo();</br> u1.setAge(</span>15<span style="color: #000000">);</br> u1.setUname(</span>"你好"<span style="color: #000000">);</br></br>

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>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p>步驟3、在前臺取值的時候須要我麼作一遍處理</p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre><span style="background-color: #ffff00; color: #000000">&lt;%</span><span style="background-color: #f5f5f5; color: #000000">@ page language</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">java</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000"> import</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">java.util.*</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000"> pageEncoding</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">utf-8</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #ffff00; color: #000000">%&gt;</span> <span style="background-color: #ffff00; color: #000000">&lt;%</span></br> <span style="background-color: #f5f5f5; color: #0000ff">String</span><span style="background-color: #f5f5f5; color: #000000"> path </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> request.getContextPath();</br> </span><span style="background-color: #f5f5f5; color: #0000ff">String</span><span style="background-color: #f5f5f5; color: #000000"> basePath </span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000"> request.getScheme()</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">://</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">request.getServerName()</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">:</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">request.getServerPort()</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #000000">path</span><span style="background-color: #f5f5f5; color: #000000">+</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #800000">/</span><span style="background-color: #f5f5f5; color: #800000">"</span><span style="background-color: #f5f5f5; color: #000000">;</br></br> </span><span style="background-color: #ffff00; color: #000000">%&gt;</span></br></br>

<span style="color: #0000ff"><!</span><span style="color: #ff00ff">DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"</span><span style="color: #0000ff">></span> <span style="color: #0000ff"><</span><span style="color: #800000">html</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"><</span><span style="color: #800000">head</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"><</span><span style="color: #800000">base </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="<%=basePath%>"</span><span style="color: #0000ff">></span></br></br>

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

<span style="background-color: #f5f5f5; color: #000000"> }</br> });</br> });</br> });</br> </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">head</span><span style="color: #0000ff">></span></br></br>

<span style="color: #0000ff"><</span><span style="color: #800000">body</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"><</span><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">="ajax"</span><span style="color: #ff0000"> id</span><span style="color: #0000ff">="btn"</span><span style="color: #0000ff">/></span></br></br>

<span style="color: #0000ff"></</span><span style="color: #800000">body</span><span style="color: #0000ff">></span></br> <span style="color: #0000ff"></</span><span style="color: #800000">html</span><span style="color: #0000ff">></span></pre>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p>方案三：使用無返回值的處理器方法</p> <p>步驟一：同上</p> <p>步驟二：使用響應流回送數據</p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre>@RequestMapping(value="/hello5.do"<span style="color: #000000">)</br> </span><span style="color: #0000ff">public</span> <span style="color: #0000ff">void</span> hello(HttpServletResponse response) <span style="color: #0000ff">throws</span><span style="color: #000000"> IOException{</br> UserInfo u1</span>=<span style="color: #0000ff">new</span><span style="color: #000000"> UserInfo();</br> u1.setAge(</span>15<span style="color: #000000">);</br> u1.setUname(</span>"你好"<span style="color: #000000">);</br></br>

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>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p>步驟三：在前臺取值也須要作處理</p> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div> <pre>&lt;%@ page language="java" <span style="color: #0000ff">import</span>="java.util.*" pageEncoding="utf-8"%&gt; &lt;%<span style="color: #000000"> String path </span>=<span style="color: #000000"> request.getContextPath(); String basePath </span>= request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"<span style="color: #000000">; </span>%&gt;</br>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"></br> <html></br> <head></br> <base href="<%=basePath%>"></br></br>

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

<span style="color: #000000"> }</br> }); }); }); </span></script></br> </head></br>

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

</body></br> </html></pre>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="複製代碼"><img src="//common.cnblogs.com/images/copycode.gif" alt="複製代碼"></a></span></div></div> <p>&nbsp;</p></div>