SpringMVC 3.x
博文目录
使用Ajax发出非get,post请求！
我们知道浏览器只能发出get,post请求，但是我们可以通过Ajax来实现发出put,delete等请求，我们以最简单的例子来演示一下!
我们将上篇博文中的删除改成ajax请求删除！
我们在我们的user.jsp页面引入jquery.js，使用jquery来发出ajax请求：
user.jsp页面修改如下：（只改动删除的a标签和script部分）
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户列表</title>
</head>
<body>
<h1>用户列表--<a href="/user/add">添加用户</a></h1>
<ul>
<c:forEach items="${userList }" var="user">
<li>用户名：${user.username }----密码：${user.password }----<a href="/user/edit/${user.id}">修改用户</a>----<a href="javascript:;" class="del" ref="${user.id }">删除用户</a></li>
</c:forEach>
</ul>
<img alt="" src="/static/img/1.jpg">
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(".del").click(function(){
var id=$(this).attr("ref");
$.ajax({
type:"delete",
url:"/user/del/"+id,
success:function(e){
alert(e);
}
});
});
});
</script>
</body>
</html>
将我们的UserController里的del方法改动如下：
@RequestMapping(value="/del/{id}",method=RequestMethod.DELETE)
@ResponseBody
public String del(@PathVariable Integer id){
userService.del(id);
return "1";
}
返回给页面的是json数据！！启动服务器，删除对象，会弹出1。
注意：ajax请求，页面是不刷新的，删除后的用户仍然在页面，但是已经不再数据库了，刷新页面，刚才删除的用户才会消失。
最后补充说一点：
重定向到一个方法上时，如何给页面传值，我们知道，经过model传值是request空间传值，重定向值就消失了。
我们使用一个新的对象来进行重定向的传值：（RedirectAttributes）
我们以add方法为例：
@RequestMapping(value="/add",method=RequestMethod.POST)
public String add(@Valid User user,BindingResult bindingResult,RedirectAttributes redirectAttributes){
if(bindingResult.hasErrors()){
return "user/add";
}
userService.save(user);
redirectAttributes.addFlashAttribute("message", "数据更新成功");
return "redirect:/user";
}
值可以直接传到user.jsp，使用EL表达式接收即可！！
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户列表</title>
</head>
<body>
<!--跨页面传值message-->
<h1>${message }</h1>
<h1>用户列表--<a href="/user/add">添加用户</a></h1>
<ul>
<c:forEach items="${userList }" var="user">
<li>用户名：${user.username }----密码：${user.password }----<a href="/user/edit/${user.id}">修改用户</a>----<a href="javascript:;" class="del" ref="${user.id }">删除用户</a></li>
</c:forEach>
</ul>
<img alt="" src="/static/img/1.jpg">
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(".del").click(function(){
var id=$(this).attr("ref");
$.ajax({
type:"delete",
url:"/user/del/"+id,
success:function(e){
alert(e);
}
});
});
});
</script>
</body>
</html>