Spring MVC SpringMVC后端返回数据到前端代码示例
筱菜鸟 人气:01.返回ModelAndView对象(.jsp)
controller代码:
package controller; import java.util.List; import javax.annotation.Resource; import model.Comment; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.stereotype.Service; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; import service.CommentService; @Controller //@RequestMapping("comment") public class CommentController { @Resource private CommentService commentService; @RequestMapping(value="showComments") public ModelAndView test(){ ModelAndView mav = new ModelAndView(); List<Comment> comments = commentService.selectAllComment(); for(Comment com:comments){ System.out.println(com.getC_text()); } mav.addObject("msg",comments); mav.setViewName("textIndex.jsp"); return mav; } }
jsp页面代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>" rel="external nofollow" > <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" > --> </head> <body> <c:forEach items="${msg}" var="com"> ${com.getUid()}:${com.getC_text()}:${com.getC_date()}<br> </c:forEach> </body> </html>
2.返回JSON数据到html页面
利用ajax接收数据
ajax({ method:'post', url:'http://localhost:8080/graduate/showComments.do', data:'null', success:function(response){ console.log(response); } })
controller
@Controller //@RequestMapping("comment") public class CommentController { @Resource private CommentService commentService; @RequestMapping(value="showComments") @ResponseBody public List<Comment> test(){ List<Comment> comments = commentService.selectAllComment(); for(Comment com:comments){ System.out.println(com.getC_text()); } return comments; } }
3.顺便记录一下原生ajax,方便以后使用
function ajax(opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || 'POST'; opt.url = opt.url || ''; opt.async = opt.async || true; opt.data = opt.data || null; opt.success = opt.success || function () {}; var xmlHttp = null; if (XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); }var params = []; for (var key in opt.data){ params.push(key + '=' + opt.data[key]); } var postData = params.join('&'); if (opt.method.toUpperCase() === 'POST') { xmlHttp.open(opt.method, opt.url, opt.async); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); xmlHttp.send(postData); } else if (opt.method.toUpperCase() === 'GET') { xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async); xmlHttp.send(null); } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { opt.success(JSON.parse(xmlHttp.responseText)); } }; }
加载全部内容