1、测试使用JQuery点点击事件是否成功
//引入jQuery文件
<script src="js/jquery.min.js"></script>
<script>
/**
* 页面加载，绑定点击事件
* 点击后没有弹窗是因为被前端控制器所拦截，此刻引入的jQuery文件
* 需要从webapp下引入（该文件存放于webapp下）所有会被前端控制器拦截
* 导致点击事件无效。
* 解决方法：在spring的配置文件中配置哪些资源不被前端控制器拦截
*/
$(function () {
//页面加载，绑定单机事件
$("#btn").click(function () {
//编写json格式，设置属性和值
alert("hello")
});
});
</script>
<body>
<button id="btn">ajax请求</button>
<br>
</body>
</html>
在spring配置文件中配置哪些资源文件不经过springMVC的拦截
SpringConfig.xml
<!--前端控制器,哪些静态资源不拦截
请求中带js路径的,前端控制器都不会进行拦截
-->
<mvc:resources location="/js/" mapping="/js/**"/>
2、解析JSON数据
将ajax请求发送过来的json数据进行解析需要添加以下依赖
<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>
html
<head>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
//页面加载，绑定单机事件
$("#btn").click(function () {
$.ajax({
//编写json格式，设置属性和值
url:"user/testAjax",
contentType:"application/json;charset=UTF-8",
data:'{"username":"你好","password":"123","age":30}',
dataType:"json",
type:"post",
success:function (data) {
//data服务器端响应的json的数据，进行解析
alert(data);
alert(data.username);
alert(data.password);
alert(data.age);
}
});
});
});
</script>
</head>
<body>
<button id="btn">ajax请求</button>
</body>
</html>
Controller
/**
* ajax请求发送的数据的key与实体类的属性名对应，从而将数据封装到实体对象中去
* 需要提供jackson依赖
* @RequestBody 接收请求体
* @ResponseBody 响应请求体，将返回的实体类以json结构呈现
* SpringMVC框架省去了将对象转换成json数据，用response拿到输出流往回写
*/
@RequestMapping("/testAjax")
public @ResponseBody User testAjax(@RequestBody User user){
//客户端发送ajax的请求，传的是json字符串，后端把json字符串封装到user对象中
System.out.println(user);
//做响应，模拟查询数据库
user.setUsername("haha");
user.setAge(40);
//做响应
return user;
}