SpringMVC_3.x_入门指南_6

tomatoboryj 2013-10-23

SpringMVC 3.x

博文目录

  1. 使用Ajax发出delete请求
  2. 重定向传值问题

使用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>

相关推荐

mmywcoco / 0评论 2020-06-06