下面我们将通过这个实例，去感受前后端交接的处理流程
首先我们先来看一个这样的html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>告白墙</title> </head> <body> <!-- 通过内部样式style标签，引入CSS样式 --> <style> *{ /* 首先先去除浏览器样式 */ /* 将 内外边距设置为0,设置盒子模型为向内挤压 */ margin: 0; padding: 0; box-sizing: border-box; } .containner{ width: 100%; } h3{ /* 文本居中 */ text-align: center; /* 上下边距为 20px，左右边距为0 */ padding: 20px 0; font-size: 24px; } p{ text-align: center; color: #666; padding: 10px 0; } .row{ width: 400px; height: 50px; /* 上下外边距为零，左右外边距自适应 */ /* 就是元素水平居中操作 */ margin: 0 auto; /* 弹性布局 */ display: flex; /* 水平居中 */ justify-content: center; /* 垂直居中 */ align-items: center; } .row span{ width: 60px; font-size: 17px; } .row input{ width: 300px; height: 40px; line-height: 40px; font-size: 20px; text-indent: 0.5em; outline: none; } .row #submit{ width: 360px; height: 40px; font-size: 20px; line-height: 40px; margin: 0 auto; color: white; background-color: orange; border: none; border-radius: 15px; outline: none; } /* 当鼠标点击按钮的时候，会改变按钮颜色 */ .row #submit:active{ background-color: grey; } </style> <div class="container"> <h3>表白墙</h3> <p>输入后点击提交，会将信息显示在表格中</p> <br> <div class="row"> <span>谁: </span> <input type="text"> </div> <div class="row"> <span>对谁: </span> <input type="text"> </div> <div class="row"> <span>说什么: </span> <input type="text"> </div> <div class="row"> <button id="submit">提交</button> </div> </div> <script> let submitBtn = document.querySelector('#submit'); submitBtn.onclick = function(){ // 1、获取 3个input 文本框中的数据 let inputs = document.querySelectorAll('input'); let from = inputs[0].value; let to = inputs[1].value; let say = inputs[2].value; if(from == ''|| to == '' || say == ''){ // 用户填写的数据，并不完整。所以不提交。 return; } // 2、生成一个新的 div，内容就是 三个 input 文本框的内容拼接 // 再把这个 元素，挂在DOM树上。 let newDiv = document.createElement('div'); newDiv.innerHTML = from + "对" + to +"说：" + say; newDiv.className = 'row'; // 将新建节点，挂在 container 这个节点下面 let container = document.querySelector('.container'); container.appendChild(newDiv); } </script> </body> </html>
效果图
既然是前后端的交互我们就首先要搞清楚具体的流程
下面是我们的要达到的效果
接下来让我们看看具体的代码怎么写
完整的servlet代码
import com.fasterxml.jackson.databind.ObjectMapper; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.List; // 我们后端用这个类来接收前端提交的数据 class Message { public String from; public String to; public String message; } // 这里只是把我们的数据存到了我们的内存中，服务器一重启，数据就没了 @WebServlet("/message") public class MessageWallServlet extends HttpServlet{ // 因为前后端提交数据的格式是json，我们用jackson这个第三方库来接收处理前端传来的json类型的数据 private ObjectMapper objectMapper = new ObjectMapper(); // 又因为我们两个方法都有用到这个objectMapper这个类，我们把他放到 List<Message> messages = new ArrayList<>(); @Override // 这个接口用来前端从后端获取数据,并显示在页面上 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // super.doGet(req, resp); resp.setContentType("application/json; charset=utf-8"); // 设置返回的数据类型 // 把么message对象转成json格式的字符串 String body = objectMapper.writeValueAsString(messages); resp.getWriter().write(body); // 把json格式的数据写入返回响应的body当中 } @Override // 这个接口用来后端接收从前端获取到的表单数据并储存起来 protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // super.doPost(req, resp); Message message = objectMapper.readValue(req.getInputStream(), Message.class); // 读取数据到message对象当中 messages.add(message); // 最直接的办法就是把这个直接存到内存里 resp.setContentType("application/json; charset=utf-8"); // 设置返回的编码格式 // 因为前端给我的数据格式是json类型的，所以我们后端返回给前端的数据也是json类型的（为了统一格式） resp.setStatus(200); resp.getWriter().write("{\"ok\":1}"); } }
前端代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表白墙</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .container { width: 800px; margin: 10px auto; } .container h2 { text-align: center; margin: 30px 0px; } .row { height: 50px; display: flex; justify-content: center; margin-top: 5px; line-height: 50px; } .row span { height: 50px; width: 100px; line-height: 50px; } .row input { height: 50px; width: 300px; line-height: 50px; } .row button { width: 400px; height: 50px; color: white; background-color: orange; border: none; border-radius: 10px; } .row button:active { background-color: grey; } </style> </head> <body> <!-- 这是一个顶层容器, 放其他元素 --> <div class="container"> <h2>表白墙</h2> <div class="row"> <span>谁</span> <input type="text" id="from"> </div> <div class="row"> <span>对谁</span> <input type="text" id="to"> </div> <div class="row"> <span>说什么</span> <input type="text" id="message"> </div> <div class="row"> <button>提交</button> </div> </div> <!-- 引入ajax相关的内容，我们可以通过ajax构造get请求和post请求 --> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> let container = document.querySelector('.container'); let fromInput = document.querySelector('#from'); let toInput = document.querySelector('#to'); let messageInput = document.querySelector('#message'); let button = document.querySelector('button'); button.onclick = function() { // 1. 把用户输入的内容获取到.获取输入框的对象 let from = fromInput.value; let to = toInput.value; let message = messageInput.value; if (from == '' || to == '' || message == '') { return; } // 2. 构造一个 div, 把这个 div 插入到 .container 的末尾 let newDiv = document.createElement('div'); newDiv.className = 'row'; newDiv.innerHTML = from + " 对 " + to + " 说: " + message; // 3. 把 div 挂在 container 里面 container.appendChild(newDiv); // 4. 把之前的输入框内容进行清空 fromInput.value = ''; toInput.value = ''; messageInput.value = ''; // 5. [新的步骤] 需要把刚才输入框里取到的数据, 构造成 POST 请求, 交给后端服务器! // 这里创建出了js一个对象，js对象中的每个方法和属性都是通过键值对这样的形式来表达的，键值对之间采用逗号进行分割，键和值之间用冒号来分割 // json中的键要求是字符串的形式 let messageJson = { "from": from, "to": to, "message": message }; // 客户端也就是我们通过ajax发起的请求，这个请求通过网络发给我们的tomcat服务器，进而就会调用我们也就是后端的doxxx方法 // 之后也就是我们后端通过resp.getWriter.writer构造出http响应，通过我们的tomcat服务器传给我们的客户端，客户端这里收到数据就会触发客户端的代码（ajax的回调success函数） $.ajax({ type: 'post', // 相对路径的写法 url: 'message', contentType: 'application/json;charset=utf8', // 绝对路径的写法 // url: '/MessageWall/message', data: JSON.stringify(messageJson), success: function(body) { alert("提交成功!"); }, error: function() { // 会在服务器返回的状态码不是 2xx 的时候触发这个 error. alert("提交失败!"); } }); } // 这个函数在页面加载的时候调用. 通过这个函数从服务器获取到当前的消息列表. // 并且显示到页面上. function load() { $.ajax({ type: 'get', url: 'message', success: function(body) { // 此处得到的 body 已经是一个 js 对象的数组了. // ajax 自动帮我们进行类型转换了. // 本来服务器返回的是 JSON 格式的字符串, ajax 会自动的根据 Content-Type 为 application/json // 对响应的 body 进行解析, 解析成 js 对象. // 遍历数组的元素, 把内容构造到页面上. let container = document.querySelector('.container'); for (let message of body) { let newDiv = document.createElement('div'); newDiv.className = 'row'; newDiv.innerHTML = message.from + " 对 " + message.to + " 说 " + message.message; container.appendChild(newDiv); } } }) } // 函数调用写在这里, 就表示在页面加载的时候来进行执行. load(); // 整个前后端交互的流程，大致是我们打开这个html页面或者说刷新页面，就会调用我们的load函数， //load函数中的ajax构造了一个get请求，发送给tomcat服务器，进而调用我们后端servlet代码中的doGet方法 // 我们通过doGet方法返回一个http响应，并通过tomcat服务器把响应传给客户端， // 客户端接收到数据后就会调用ajax的回调函数succes函数，把数据显示在页面上 </script> </body> </html>
