ssm(spring+springmvc+mybatis)发起ajax请求前后端数据交互问题与解决方案
1.ajax发起无参的ajax请求返回任意类型的数据通常这种请求最为简单，不会报错，如下：jsp界面controller运行结果能在浏览器控制台正常返回结果。2.ajax发起有参的ajax请求返回任意类型的数据jsp界面controller运行结果后端能成功接收到数据浏览器控制台能正常显示后端返回的数据2.ajax发起有参(且参数为某一个对象类型)的ajax请求返回任意类型的数据jsp界面如果我们
1. 发起无参ajax请求
这是最简单的ajax请求，如下：
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
type:"get",
url:"/get2",
success:function (result) {
console.log(result);
},error:function (e) {
console.log(e);
}
});
</script>
</body>
</html>
后端：
运行结果：
现在如果我想从后端获取某一个自定义的对象或者一个List列表，这样还行吗？
看一下代码：
不行了，在idea控制台上出现如下警告信息：
[WARNING] Resolved [org.springframework.http.converter.HttpMessageNotWritableException: No converter found for return value of type: class java.util.ArrayList]
在浏览器上报错如下：
看了以下那个警告信息，发现如下：
上面讲无法找到那个ArrayList的转换器，这个时候我们可以在pom.xml添加如下三个依赖：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
</dependency>
我不知道为什么我加上上述三个依赖依旧报错，后来在spring-mvc.xml配置文件中加入如下代码就可以正常输出了。
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="messageConverters">
<list>
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter" />
</list>
</property>
</bean>
运行结果：
2. 发起有参ajax请求
如下：
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
type:"get",
url:"/get5",
data:{'id':1,'name':'liuze','gender':'male'},
success:function (result) {
console.log(result);
},error:function (e) {
console.log(e);
}
});
</script>
</body>
</html>
后端实现：
运行结果：
有的读者就要问了，如果后端的参数名称和前端的那个参数名称不一致，后端还可以接收到的前端发过来的数据吗？答案是不能，但是我们可以给后端的那个参数前加上一个注解@RequestParam，如下：
添加注解@RequestParam之后，
3. 发起有参且后端接收的是对象的ajax请求
就是这样的情况，比如现在我想在前端发送一个自定义的对象到后端，在后端把对象打印出来，怎样实现呢？
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
type:"post",
url:"/get6",
data:JSON.stringify({'id':1,'name':'liuze','gender':'male'}),
contentType:"application/json",
success:function (result) {
console.log(result);
},error:function (e) {
console.log(e);
}
});
</script>
</body>
</html>
因为这里传到后端的是一个对象，所以需要把它转换成JSON对象，这样在能让后端认识到。
后端：
这里需要注意的就是需要添加注解@RequestBody
运行结果如下：
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
4
0- 0
已为社区贡献14条内容
所有评论(0)