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

    复制代码
  • 相关阅读:
    keras: 在构建LSTM模型时,使用变长序列的方法
    keras:Exception: Error when checking model target
    Scipy.sparse矩阵的存储,读取和转化为稠密矩阵
    Feature Selection 其一 —— Filter Approach
    超限学习机 (Extreme Learning Machine, ELM) 学习笔记 (一)
    [IR课程笔记]Web search
    [数据挖掘课程笔记]无监督学习——聚类(clustering)
    [IR课程笔记]Query Refinement and Relevance Feedback
    [IR课程笔记]Hyperlink-Induced Topic Search(HITS)
    DIARY10-05
  • 原文地址:https://www.cnblogs.com/jpfss/p/8950623.html
Copyright © 2020-2023  润新知