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>