spring mvc 对ajax的处理
程序员文章站
2022-07-15 15:37:31
...
今天学习了spring mvc 对ajax的异步请求处理，所以总结一下。
传统上spring 都是处理器返回一个modelandview对象的方式再通试图解析器给客户端返回一个页面。但ajax需要返回的是数据，而不是一个新的页面。可以利用spring mvc的@requestBody返回数据。
首先需要在spring mvc中配置一个转换器，用来作java对象与json数据之间转换。“
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<!-- 基础扫描，会主动扫描指定的包 -->
<context:component-scan base-package="test" />
<mvc:annotation-driven />
<!-- 导入spring主文件资源 -->
<import resource="classpath:applicationContext.xml"/>
<!-- 配置试图解析器 -->
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<!-- 前缀 -->
<property name="prefix">
<value>/</value>
</property>
<!-- 后缀 -->
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<!--
这是处理分发器
<bean id="urlHandlerMapping"
class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<property name="mappings">
<props>
<prop key="test.do">controller01</prop>
</props>
</property>
</bean>
-->
<!-- 111111111111111111111111111 -->
<bean id="stringHttpMessageConverter"
class="org.springframework.http.converter.StringHttpMessageConverter"/>
<!--解决IE浏览器json文件下载和json数据中午乱码的问题-->
<bean id="mappingJackson2HttpMessageConverter"
class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
</beans>mvc 会默认使转换器把提交的数据转换成java对象和把返回客户端的数据转换成json。
处理器的代码如下
@RequestMapping(value="test.do")
public @ResponseBody List<er> test01(){
System.out.println("111111111111111");
er user1 = new er();
user1.setAge(18);
user1.setName("joke");
user1.setSex("男");
er user2 = new er();
user2.setAge(28);
user2.setName("lufy");
user2.setSex("男");
er user3 = new er();
user3.setAge(25);
user3.setName("amy");
user3.setSex("女");
List<er> list = new ArrayList();
list.add(user1);
list.add(user2);
list.add(user3);
System.out.println(list);
return list;
}返回的list会默认根据转换器转换成json数据格式返回给客户端
前端代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("#test").click( //绑定函数
function(){
$.getJSON("test.do",function(data){ //异步请求get提交，test.do指定springmvc处理器，函数是请求处理完成之后的处理函数
console.log(data);
var div=$("div");
var data = data;
console.log(1);
var n = "<table border=1 width=100%>";
n += "<tr>";
for(var name in data[0]){
n +="<td>"+name+"</td>";
}
n +="</tr>";
for(var i=0;i<data.length;i++){
for(var name in data[i]){
n += "<td>"+data[i][name]+"</td>";
}
n +="</tr>";
}
n += "</table>";
div.html(n);
});
}
);
})
</script>
</head>
<body>
<button id="test">提交请求</button>
</body>
</html>
新手学习记录，肯定很多不足。希望多多指点。
推荐阅读