zoukankan html css js c++ java

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">&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+"
"+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+"
"+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+"
"+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">
</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>+"
"+<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>

查看全文

相关阅读:
Two Sum II
Subarray Sum
Intersection of Two Arrays
Reorder List
Convert Sorted List to Binary Search Tree
Remove Duplicates from Sorted List II
Partition List
Linked List Cycle II
Sort List
struts2结果跳转和参数获取

原文地址：https://www.cnblogs.com/jpfss/p/8950623.html