前后端分离实现
前后端分离的好处就不用多说了，前后端那么Java Web项目前后端分离是怎么实现的呢？
1.浏览器发送请求
2.直接到达html页面（前端控制路由与渲染页面，整个项目开发的权重前移）
3.html页面负责调用服务端接口产生数据（通过ajax等等，后台返回json格式数据，json数据格式因为简洁高效而取代xml）
4.填充html，展现动态效果，在页面上进行解析并操作DOM。
它的核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。如果后端采用了Spring MVC框架的话，那么只需要·加一个@ResponseBody注解就可以返回json对象,一个@RequestBody就可以接收前台json数据，这就是框架的好处吧，可以省很多工夫，但是现在先不用，用最基本的Servlet来接收和返回json数据。
JQuery对ajax的支持
JQuery也有对AJAX的支持，使得其对AJAX的操作简化了很多,这样就不用用原生js了。
关键字
简介
$.ajax
提交AJAX请求
$.get
使用get方式提交ajax
$.post
使用post方式提交ajax
load
最简单的调用ajax的方式
serialize
格式化form下的输入数据
前后端交互
建一个实体类
1package edu.hpu.Pojo; 2 3public class Role { 4 5 6 7 private String name; 8 private String film; 9 public String getName() { 10 11 12 13 return name; 14 } 15 public void setName(String name) { 16 17 18 19 this.name = name; 20 } 21 public String getFilm() { 22 23 24 25 return film; 26 } 27 public void setFilm(String film) { 28 29 30 31 this.film = film; 32 } 33 @Override 34 public String toString() { 35 36 37 38 return "Role [name=" + name + ", film=" + film + "]"; 39 } 40 41}
我们的前后端数据就主要围绕这个实体类展开了。
导入相应的包和jquery.min.js
解析json数据好像用Jackson的比较多（可以参考【3】），但这个用的不是，具体用的包直接参考【2】。
提交数据
submit.html:
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>提交数据</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7</head> 8<body> 9<form> 10 <p>影视角色</p> 11 姓名：<input type="text" id="name"><br> 12 电影：<input type="text" id="film"><br> 13 <input type="button" value="提交" id="sender"> 14</form> 15<div id="message"></div> 16<script type="text/javascript"> 17 $('#sender').click(function () { 18 19 20 //点击按钮触发 21 var name=document.getElementById("name").value; 22 var film=document.getElementById("film").value; 23 var role={ 24 25 26 "name":name,"film":film}; //新建一个json对象 27 var url="submitServlet"; 28 29 $.post( 30 url, 31 { 32 33 34 "data":JSON.stringify(role)}, 35 function(data) { 36 37 38 39 alert("提交成功，请在Tomcat控制台查看服务端接收到的数据"); 40 }); 41 }); 42</script> 43</body> 44</html>
SubmitServlet:
1package edu.hpu.servlet; 2 3import java.io.IOException; 4import javax.servlet.ServletException; 5import javax.servlet.annotation.WebServlet; 6import javax.servlet.http.HttpServlet; 7import javax.servlet.http.HttpServletRequest; 8import javax.servlet.http.HttpServletResponse; 9 10import edu.hpu.Pojo.Role; 11import net.sf.json.JSONObject; 12 13/** 14 * Servlet implementation class SubmitServlet 15 */ 16 17public class SubmitServlet extends HttpServlet { 18 19 20 21 private static final long serialVersionUID = 1L; 22 23 24 public SubmitServlet() { 25 26 27 28 super(); 29 30 } 31 32 33 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 34 35 36 37 38 doPost(request, response); 39 } 40 41 42 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 43 44 45 46 String data=request.getParameter("data"); //获取前端传递数据 47 System.out.println("服务端接收到的数据是：" +data); 48 49 JSONObject json=JSONObject.fromObject(data); 50 51 System.out.println("转换为JSON对象之后是："+ json); 52 53 Role role = (Role)JSONObject.toBean(json,Role.class); 54 System.out.println("转换为Hero对象之后是："+role); 55 } 56 57}
web.xml配置：
1 <servlet> 2 <servlet-name>SubmitServlet</servlet-name> 3 <servlet-class>edu.hpu.servlet.SubmitServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>SubmitServlet</servlet-name> 7 <url-pattern>/submitServlet</url-pattern> 8 </servlet-mapping>
跑一下，结果：
前端获取一个对象
GetOneServlet:
1package edu.hpu.servlet; 2 3import edu.hpu.pojo.Role; 4import net.sf.json.JSONObject; 5 6import javax.servlet.ServletException; 7import javax.servlet.annotation.WebServlet; 8import javax.servlet.http.HttpServlet; 9import javax.servlet.http.HttpServletRequest; 10import javax.servlet.http.HttpServletResponse; 11import java.io.IOException; 12 13 14public class GetOneServlet extends HttpServlet { 15 16 17 18 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 19 20 21 22 Role role=new Role(); 23 role.setName("柳飘飘"); 24 role.setFilm("喜剧之王"); 25 JSONObject json= new JSONObject(); 26 json.put("role", JSONObject.fromObject(role)); 27 response.setContentType("text/html;charset=utf-8"); 28 response.getWriter().print(json); 29 } 30 31 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 32 33 34 35 36 } 37}
web.xml配置：
1 <servlet> 2 <servlet-name>GetOneServlet</servlet-name> 3 <servlet-class>edu.hpu.servlet.GetOneServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>GetOneServlet</servlet-name> 7 <url-pattern>/getOneServlet</url-pattern> 8 </servlet-mapping>
getOne.html:
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>获取一个对象</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7</head> 8<body> 9 影视角色：<br> 10 <input type="submit" value="通过AJAX获取一个Role对象" id="sender"> 11 <div id="message"></div> 12 <script type="text/javascript"> 13 $('#sender').click(function(){ 14 15 16 17 var url="getOneServlet"; 18 $.post( 19 url, 20 function(data) { 21 22 23 24 var json=JSON.parse(data); 25 var name =json.role.name; 26 var film = json.role.film; 27 $("#message").html("角色名字："+name + "<br>电影:" +film ); 28 29 }); 30 }); 31 </script> 32</body> 33</html>
跑一下，结果：
F12可以进入调试模式，查看前端发出的异步请求以及后端的响应：
前端获取多个对象
GetManyServlet:
1package edu.hpu.servlet; 2 3import edu.hpu.pojo.Role; 4import net.sf.json.JSONSerializer; 5 6import javax.servlet.ServletException; 7import javax.servlet.annotation.WebServlet; 8import javax.servlet.http.HttpServlet; 9import javax.servlet.http.HttpServletRequest; 10import javax.servlet.http.HttpServletResponse; 11import java.io.IOException; 12import java.util.ArrayList; 13import java.util.List; 14 15@WebServlet(name = "GetManyServlet") 16public class GetManyServlet extends HttpServlet { 17 18 19 20 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 21 22 23 24 List<Role> roles=new ArrayList<>(); 25 for (int i=0;i<10;i++){ 26 27 28 29 Role role=new Role(); 30 role.setName("燕双鹰"+i); 31 role.setFilm("宇宙第一豪杰、灭霸杀手"+i); 32 roles.add(role); 33 } 34 String result= JSONSerializer.toJSON(roles).toString(); //通过通过JSONSerializer.toJSON(heros)把集合转换为JSON字符串 35 response.setContentType("text/html;charset=utf-8"); //设置编码 36 response.getWriter().print(result); //以流的形式传递给前端 37 } 38 39 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 40 41 42 43 44 } 45} 46
配置：
1<servlet> 2 <servlet-name>GetManyServlet</servlet-name> 3 <servlet-class>edu.hpu.servlet.GetManyServlet</servlet-class> 4 </servlet> 5 <servlet-mapping> 6 <servlet-name>GetManyServlet</servlet-name> 7 <url-pattern>/getManyServlet</url-pattern> 8 </servlet-mapping>
getMany.html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>获取多个对象</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7</head> 8<body> 9 <input type="button" value="通过AJAX获取多个Hero对象" id="sender"> 10 <div id="messageDiv"></div> 11 <script> 12 $('#sender').click(function () { 13 14 15 16 var url="getManyServlet"; 17 $.post( 18 url, 19 function (data) { 20 21 22 23 var roles=$.parseJSON(data); //把返回的数据转换为json数组 24 for(i in roles){ 25 26 27 //循环json数组 28 var old = $("#messageDiv").html(); 29 var role = roles[i]; 30 $("#messageDiv").html(old + "<br>"+role.name+" ----- "+role.film); 31 } 32 } 33 ); 34 }); 35 </script> 36</body> 37</html>
跑一下结果：
参考：
【1】、https://blog.csdn.net/piantoutongyang/article/details/65446892?tdsourcetag=s\_pctim\_aiomsg###
【2】、http://how2j.cn/k/jquery/jquery-ajax/474.html#step1002
【3】、https://blog.csdn.net/qq1940879801/article/details/77854906
【4】、http://how2j.cn/k/servlet/servlet-submit-json/1323.html#nowhere
【5】、http://how2j.cn/k/servlet/servlet-get-one-json/1324.html#nowhere
【6】、http://how2j.cn/k/servlet/servlet-get-many-json/1325.html
本文分享 CSDN - 三分恶。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。