java之spring mvc之ajax

1.可以使用servletAPI来实现 ajax

Controller 类

@Controller
public class AjaxController {
    @RequestMapping("/ajax.do")
    public String ajax(HttpServletResponse resp) throws IOException{
        resp.getWriter().print("ajax hello");
        return null;
    }
}

Jsp

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#btn').click(function(){
        $.post("ajax.do",function(data){
            alert(data);
        });
    });
});
</script>
</head>
<body>
<button id="btn">异步获取数据信息</button>
</body>

2. 使用 springmvc 提供的组件来实现 ajax

导入 jackson 的相关包：

 

Controller 处理

@RequestMapping("/json.do")
    @ResponseBody//将返回内容插入页面中
    public List<User> list(){
        List<User> list = new ArrayList<User>();
        list.add(new User(1,"张三",22));
        list.add(new User(2,"李四",32));
        return list;
    }

配置文件

<!-- json配置 -->
     <bean id="stringConverter"  
        class="org.springframework.http.converter.StringHttpMessageConverter">  
        <property name="supportedMediaTypes">  
            <list>  
                <value>text/plain;charset=UTF-8</value>  
            </list>  
        </property>  
    </bean>  
    <bean id="jsonConverter"  
        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>  
    <bean  
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
        <property name="messageConverters">  
            <list>  
                <ref bean="stringConverter" />  
                <ref bean="jsonConverter" />  
            </list>  
        </property>  
    </bean>

Jsp 页面

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#btn').click(function(){
        $.post("json.do",function(data){
            var html="";
            for(var i=0;i<data.length;i++){
                html+="<tr><td>"+data[i].id+"</td><td>"+data[i].name+"</td><td>"+data[i].age+"</td></tr>"
            }
            $("#content").html(html);
        });
    });
});
</script>
</head>
<body>
<button id="btn">异步获取数据信息</button>
<table width="80%" align="center">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
<tbody id="content"></tbody>
</table>
</body>
</html>

配置优化 

<?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:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    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">
    <!-- 配置视图解析器 -->
    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.UrlBasedViewResolver">
        <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
           <!-- 为响应的视图名称加上前缀  -->
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <!-- 为响应的视图名称加上后缀  -->
        <property name="suffix" value=".jsp"/>
    </bean>
    <mvc:annotation-driven/>
    <context:component-scan base-package="cn.sxt.controller"/>
</beans>

 github地址：https://github.com/Vincent-yuan/springmvc_ajax

posted @ 2019-08-01 06:53  Vincent-yuan  阅读(481)  评论(0)  编辑  收藏  举报