SpringMVC学习之Ajax响应json数据

最新推荐文章于 2024-09-20 18:15:48 发布

原创最新推荐文章于 2024-09-20 18:15:48 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Web应用中使用Ajax与SpringMVC框架进行异步请求处理，包括配置前端控制器以正确处理静态资源，利用jQuery发起Ajax请求，并在服务器端接收与响应JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先搭建环境：
1.
Ajax是Jquery中的.所以要引入js文件，
在Web应用下创建js文件夹，将js文件放入此文件夹：
在这里插入图片描述
在jsp页面引用js文件：

 <script src="js/jquery-1.7.1.js"></script>

注意，我在web.xml中配置前端控制器时：

<servlet-mapping>
  	<servlet-name>dispatcherServlet</servlet-name>
  	<url-pattern>/</url-pattern>
  </servlet-mapping>

/ 会拦截除.jsp以外的资源（包括js,css等静态资源），因此此时在jsp页面中的js文件无法被使用
为了解决这个问题，我们可以在springmvc.xml中配置一下，告诉前端控制器不要拦截我要用到的资源：

  <!--告诉前端控制器，不要拦截以下静态资源  -->
       <mvc:resources location="/js/" mapping="/js/**"></mvc:resources>
        <mvc:resources location="/images/" mapping="/images/**"></mvc:resources>
        <mvc:resources location="/css/" mapping="/css/**"></mvc:resources>

如本次用到的放在js文件夹(location)下的js文件(mapping)
2.
jsp页面编写以下代码：

<script>
		$(function(){
			$("#button1").click(function(){
					$.ajax({
							url:"user/testAjax",
                    contentType:"application/json;charset=UTF-8",
                    data:'{"name":"hehe","password":"123","age":30}',
                    dataType:"json",//返回数据类型
                    type:"post",//请求类型：默认是get
					success:function(data){
								alert(data);
								alert(data.name);
								alert(data.password);
								alert(data.age);
											},
					error : function(data) {//data:返回响应的数据
                    		 alert("error" + data);
                 							}		
				})
			})
		})
	</script>
	
  </head>
  
  <body>
     <button id="button1">ajax异步请求</button>
  </body>

请求发送的数据是json类型的，如果要返回响应json数据类型，可以导入jackson的包。
在这里插入图片描述
方法：

//返回的数据类型也要是json
	@RequestMapping(value="/testAjax")
	public @ResponseBody User testAjax(@RequestBody User user){
		System.out.println("testAjax执行");
		//通过ajax传过来的json数据封装到对象中，需要导入包
		System.out.println(user);
		//模拟数据库查询
		user.setName("wangwu");
		user.setPassword("456");
		user.setAge(15);
		return user;
		//
	}

要用到@ResponseBody注解，返回数据类型，因为导入了jackson包，所以会自动把数据封装成json类型。然后响应请求。
效果：
在这里插入图片描述
点击后：

控制台：

testAjax执行
User [name=hehe, password=123, age=30]