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);
 
 
	}
    
}

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

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

商品列表：

<%-- 将后台传递过来的数据进行遍历 --%>



	
商品名称
	
商品价格
	
生产日期
	
商品描述
	
操作

	
${item.name }
	
${item.price }
	

	
${item.detail }
	
修改
 


 



 

二、方法返回值为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";
    
}

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

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

查询条件：

    
商品列表：

<%-- 将后台传递过来的数据进行遍历 --%>



	
商品名称
	
商品价格
	
生产日期
	
商品描述
	
操作

	
${item.name }
	
${item.price }
	

	
${item.detail }
	
修改
 


 



 

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

<%@ 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"%>





 

 
查询成功！



	

	
商品名称
	
商品价格
	
生产日期
	
商品描述
	
操作


	

	

	

	

	
${item.detail }
	
	
修改
 




 

三、方法返回值为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字符传输到前台
}

前端Ajax中的代码：

$.ajax({
 
type: 'post',
url: '/selectUser',
dataType: 'json',
success:function(data){
  var item;
$.each(data,function(i,result){ //将后台传递过来的数据进行遍历
item=""+result['name']+""+result['age']+""; 
$('.table').append(item); 
}); 
},
 
});

jsp中的代码：

 
name
age