Ajax+SpringMvc前后端分离_ajax和mvc前后端分离-优快云博客

本文链接：https://blog.youkuaiyun.com/Bof_jangle/article/details/80940585

前言：

正题：

总结：

前言：

传统的，我们在访问页面时，我们会将填充完数据的html页面返回给浏览器去解析。从而看到包含业务数据的网页。如jsp会在页面文件中添加Java代码来渲染页面。用EL表达式来输出model的业务内容。

这种方式在一定程度上做了前后端的分离。但并不能完全的分离。前端设计师需要懂点Java基础编程或者EL表达式。或者后端程序员需要懂一些前端页面的html知识，css知识，甚至要再会一些JavaScript。

这种设计大致是这样的：

jsp页面hello.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="s" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>啦啦啦啦啦</title>
<script type="text/javascript">
	$(function(){
		$("p").click(function(){
			$(this).hide();
		});
		$("tr").click(function(){
			$(this).hide();
		});
	});
</script>
</head>
<body>
<table>
	<thead>
		<tr>
			<th>序列</th>
			<th>名称</th>
			<th>id</th>
		</tr>
	</thead>
 <%-- hello,I'm helloJsp2. ${users[4].userName} --%>
<s:forEach items="${users}" var="item" varStatus="status">
	  <tr >
	    <td>${status.count}</td>
	    <td class="center"><span class="center">${item.userName}</span></td>
	    <td>${item.userId}</td>
	  </tr>
</s:forEach>
</table>
<p >再见.</p>
 <% %>
</body>
</html>

hello.java:

package xyz.jangle.action;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import xyz.jangle.model.User;
import xyz.jangle.service.UserService;

@Controller
@RequestMapping("/mvc")
public class Hello {
	// 养成一种习惯，将项目的控制层对象，对应的视图，视图所用的js文件，三个名称进行统一。用Ctrl+R查找时可以很方便地找到他们
	@Autowired
	private UserService userService;

	@RequestMapping("/hello")
	public ModelAndView hello() {
		System.out.println("全都一起上吧，我根本没在怕，啦蜡辣拉拉");
		List<User> users = userService.getAllUser();
		ModelAndView mav = new ModelAndView("hello"); // 参数为试图名称 viewName
		mav.addObject("users", users); // 添加model用于EL表达式输出值
		return mav;
	}

}

我们访问http://127.0.0.1/mvc/hello。用通俗非专业的口吻来说：该请求由后端逻辑Hello.java处理之后，返回给视图hello.jsp，视图jsp结合model的内容解析渲染(EL表达式输出)最终的html页面返回给浏览器。这种方式我们在打开页面的时候页面会有短暂的空白与等待（业务逻辑越复杂，数据越多就越慢）

正题：

下面介绍下Ajax获取业务数据再渲染页面的前后端分离的设计，其核心思想是：当请求时，直接返回用户想要的页面资源，再由浏览器发送Ajax请求从服务器获取业务数据，再次渲染页面进行数据展示。这里将会有两次的http请求。一次取页面，一次取数据。

一般我们的Ajax请求返回JSON数据或者xml数据，前端设计师需掌握这两种数据格式，就可以很好的设计产品所预期达到的页面效果。

大致的设计如：helloAjax.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../../js/jquery-3.3.1.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax获取数据渲染</title>
<script type="text/javascript">
	$(function(){
		$.ajax({
			url:'/hello/helloData',
			type:"post",
			dataType:"json",
			success : function(data) {
				$.each(data.users, function(index, item){
					   $("table").append("<tr>"
							   +"<td>"+index+"</td>"
							   +"<td>"+item.userName+"</td>"
							   +"<td>"+item.userId+"</td>"
							   +"</tr>");
				});
			},
			error :function(data){
				alert("失败！");
			}
		});
	});
</script>
</head>
<body>
<table>
	<thead>
		<tr>
			<th>序列</th>
			<th>名称</th>
			<th>id</th>
		</tr>
	</thead>
	
</table>

</body>
</html>

HelloAjax.java:

package xyz.jangle.action;


import java.util.HashMap;
import java.util.List;
import java.util.Map;



import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;


import xyz.jangle.model.User;
import xyz.jangle.service.UserService;


/**
 * @author huhj
 * @email  jangle@jangle.xyz
 * @time   2018年7月6日 上午10:27:20
 */
@Controller
@RequestMapping("/hello")
public class HelloAjax {
	
	@Autowired
	private UserService userService;
	
	@RequestMapping("/helloAjax")
	public ModelAndView hello(){
		ModelAndView mav = new ModelAndView("helloAjax"); 	//参数为试图名称 viewName
		return mav;
	}
	
	@RequestMapping("/helloData")
	@ResponseBody
	public Map<String, Object> helloData(){
		Map<String,Object> map = new HashMap<String,Object>();
		List<User> users = userService.getAllUser();
		map.put("users",users);
		return map;
	}

}

一个方法用于返回页面，一个方法用于返回数据。http://127.0.0.1/hello/helloAjax