Ajax+SpringMvc前後端分離

阿新 • • 發佈：2019-01-17

前言：

傳統的，我們在訪問頁面時，我們會將填充完資料的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  [email protected]
 * @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

總結：兩種方式展示的頁面是一樣的，內容也是一致的。但是在開發與分工上還是會有一些差別。所需掌握的技術也會有所偏差。

注：ajax請求時，SpringMvc會有一個預設的解析器（jackson）將各種資料型別轉化為JSON等ajax請求時（dataType）要求的資料格式。

Ajax+SpringMvc前後端分離

Ajax+SpringMvc前後端分離

springMVC前後端分離開發模式下支持跨域請求

mui與springMVC前後端分離

springmvc專案的前後端分離使用ajax的坑

前後端分離ajax請求跨域問題

Maven多模塊，Dubbo分布式服務框架，SpringMVC，前後端分離項目，基礎搭建，搭建過程出

關於.Net Core 前後端分離跨域請求時 ajax並發請求導致部分無法通過驗證解決辦法。

SSM:Spring+SpringMVC+MyBatis（實現前後端分離）

前後端分離，解決跨域問題及django的csrf跨站請求保護 ajax 跨域 headers JavaScript ajax 跨域請求 +設定headers 實踐

Yii2.0 前後端分離前端ajax呼叫跨域的問題

前後端分離 ajax同域重定向和跨域重定向

在前後端分離的專案中，ajax跨域請求怎樣附帶cookie

前後端分離——使用Ajax跨域請求資料並分頁展示

前後端分離，https站點無法通過Ajax訪問http資源(Mixed Content，The page at 'https://xxx.com' was loaded over HTTPS)

從MVC到Ajax再到前後端分離的思考

微信授權域名允許子域名，前後端分離nginx做子域名靜態頁面對映,解決nginx跨域以及ajax跨域

vue axios ajax前後端分離專案localhost訪問java springboot後臺無法獲取後臺返回的cookie

vue2 前後端分離專案ajax跨域session問題解決

前後端分離springmvc和RESTful理解

Maven多模組，Dubbo分散式服務框架，SpringMVC，前後端分離專案，基礎搭建，搭建過程出現的問題

Ajax+SpringMvc前後端分離

相關推薦