SSM框架中，后台向前端传送数据的方法_前端请求ssm后端怎样返回连接数据库的数据

SSM框架中，后台向前端传送数据的方法

在SSM框架中我们会根据前端传递过来的数据进行业务操作，在操作之后会把结果数据返回给前端页面，前端页面才会展示给客户观看，那么后台如何向前端返回数据的呢？

我们在Controller层的Action类中编写的方法返回值通常会有三种：ModelAndView、String、Void；通常在项目中使用时，若不使用ajax传递数据，则选择使用String返回值；如果使用ajax,则使用void返回值；ModelAndView的返回值几乎不使用！

一、方法返回值为ModelAndView时，后台向前台返回数据的3种方法：

SSM中,返回值为ModelAndView时，向前端返回数据的方法
ModelAndView是什么？它主要用来干什么？
简单的理解就是在Controller层中将后台数据传递给前端。那么怎么传呢？我们就要依靠这个ModelAndView来进行传递。

那么ModelAndView具体是怎么将后台数据传递给前端的呢？下面分别用3种方法进行演示。

Controller层中的代码：

@Controller
public class TestController {
   
    @RequestMapping(value = "/itemlist.action")
    public ModelAndView toEdit(Integer id,
			HttpServletRequest request,HttpServletResponse response
			,HttpSession session,Model model){
 
//方法一：创建ModelAndView对象，再通过它的方法去设置数据和转发指定到的视图名
 
        //根据前端传递过来的id，来通过sql语句查询数据
		Items items = itemService.selectItemsById(id);
 
        //新建一个ModelAndView对象
		ModelAndView modelandview = new ModelAndView();
		//将查询的数据放入到ModelAndView对象中
                             //"itemList"：为别名，在前端页面上使用
                             //items：执行sql语句查询到的数据
		modelandview.addObject("itemList", items);
                                     
        //指定视图，也就是把查询的数据放到前端的哪个页面上去
                               //"itemList"：指定到名为这个的视图上
		modelandview.setViewName("itemList");
		return modelandview;
 
 
//方法二：在创建一个ModelAndView对象后，可以直接通过带有参数的构造方法 ModelAndView(String viewName, String attributeName, Object attributeValue) 来返回数据与转发的视图名
        
              //根据前端传递过来的id，来通过sql语句查询数据
		Items items = itemService.selectItemsById(id);
 
                return new ModelAndView("itemList","itemList", items);
 
      //简单的理解就是此种方法相当于是在方法一的基础上做了修改，省略了addObject( )和setViewName( )的方法。
 
 
 
//方法三：在创建一个ModelAndView对象后，使用重定向指定展示的视图页面
 
		 //根据前端传递过来的id，来通过sql语句查询数据
		Items items = itemService.selectItemsById(id);
 
                 return new ModelAndView(redirect:/itemlist.action);
 
 
	}
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

如果使用ModelAndView进行后台向前端传递数据，上面三种方法任选其一。

传递到前端页面 itemList.jsp代码：
查询条件：

<table width="100%" border=1>
<tr>
<td><input type="submit" value="查询"/></td>
</tr>
</table>
商品列表：
<table width="100%" border=1>
<tr>
	<td>商品名称</td>
	<td>商品价格</td>
	<td>生产日期</td>
	<td>商品描述</td>
	<td>操作</td>
</tr>
<%-- 将后台传递过来的数据进行遍历 --%>
<c:forEach items="${itemList }" var="item">
<tr>
	<td>${item.name }</td>
	<td>${item.price }</td>
	<td><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
	<td>${item.detail }</td>
	<td><a href="${pageContext.request.contextPath }/itemEdit.action?id=${item.id}">修改</a></td>
 
</tr>
</c:forEach>
 
</table>
</form>
</body>
 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

二、方法返回值为String时，后台向前台返回数据的3种方法：

SSM中，返回值为String时，后台向前端返回数据的方法
当方法的返回值为String类型时，后台怎么将数据传递给前端？闲话不多说，我们分别使用5种方法进行传递，代码如下。

Controller层中的代码：

 @Controller
public class TestController {
   
    @RequestMapping(value = "/itemlist.action")
    public ModelAndView toEdit(Integer id,
			HttpServletRequest request,HttpServletResponse response
			,HttpSession session,Model model,Map map){
 
        //根据前端传递过来的id，来通过sql语句查询数据
		Items items = itemService.selectItemsById(id);
 
//方法一：放在model里（建议使用这个）  
                             //"itemList":别名，在jsp页面中使用
        model.addAttribute("itemList", "items");
        return "itemList";
                  //指定到名为itemList.jsp的页面上
 
//方法二：放在request里
 
         request.setAttribute("itemList", "items");
         return "itemList";
 
//方法三：放在map里
 
        map.put("itemList", "items");
        return "itemList";
	}
 
//方法四：使用重定向
 
        return "redirect:/success";
 
/方法五：使用转发
        
         return "forward:/success";
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

上面五种方法任选其一，建议使用model。

方法一、二、三分别传递到前端itemList.jsp页面上，代码如下：

查询条件：

    <table width="100%" border=1>
<tr>
<td><input type="submit" value="查询"/></td>
</tr>
</table>
商品列表：
<table width="100%" border=1>
<tr>
	<td>商品名称</td>
	<td>商品价格</td>
	<td>生产日期</td>
	<td>商品描述</td>
	<td>操作</td>
</tr>
<%-- 将后台传递过来的数据进行遍历 --%>
<c:forEach items="${itemList }" var="item">
<tr>
	<td>${item.name }</td>
	<td>${item.price }</td>
	<td><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
	<td>${item.detail }</td>
	<td><a href="${pageContext.request.contextPath }/itemEdit.action?id=${item.id}">修改</a></td>
 
</tr>
</c:forEach>
 
</table>
</form>
</body>
 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

方法四、五分别重定向和转发到前端页面，代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修改商品信息</title>
 
</head>
<body> 
<table width="100%" border=1>
<tr>查询成功！</tr>
<tr>
	<td><input type="checkbox" name="ids" value=""></td>
	<td>商品名称</td>
	<td>商品价格</td>
	<td>生产日期</td>
	<td>商品描述</td>
	<td>操作</td>
</tr>
<c:forEach items="${itemList }" var="item" varStatus="s">
<tr>
	<td><input type="checkbox" name="ids" value="${item.id }"></td>
	<td><input type="text" name="itemsList[${s.index}].name" value="${item.name }"></td>
	<td><input type="text" name="itemsList[${s.index }].price" value="${item.price }"></td>
	<td><fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
	<td>${item.detail }</td>
	
	<td><a href="${pageContext.request.contextPath }/itemEdit.action?id=${item.id}">修改</a></td>
 
</tr>
</c:forEach>
</table>
</body>
 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

三、方法返回值为Void时，后台向前台返回数据的方法：

SSM中，返回值为Void,向前端传递数据的方法
Controller层中的代码：

@RequestMapping("/selectUser")
public void selectAll(){
    response.setContentType("text/text"); //设置请求以及响应的内容类型以及编码方式
    response.setCharacterEncoding("UTF-8");
    JSONArray json = JSONArray.fromObject(newsList); //将查询出的newsList对象转换为json对象
    String str = json.toString(); //将json对象转换为字符串
    response.getWriter.write(str); //将str字符传输到前台
}
1
2
3
4
5
6
7
8

前端Ajax中的代码：

$.ajax({
 
type: 'post',
url: '/selectUser',
dataType: 'json',
success:function(data){
  var item;
$.each(data,function(i,result){ //将后台传递过来的数据进行遍历
item="<tr><td>"+result['name']+"</td><td>"+result['age']+"</td></tr>"; 
$('.table').append(item); 
}); 
},
 
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

jsp中的代码：

<table class="table"> 
<tr><th>name</th><th>age</th></tr> 
</table> 
1
2
3