【网络编程】Servlet的前后端练习 | 表白墙 | 前后端交互 | 提交消息

本文主要是介绍【网络编程】Servlet的前后端练习 | 表白墙 | 前后端交互 | 提交消息 | 获取消息，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

- 一、Servlet的前后端练习
- - 1.表白墙
  - - - 服务器要实现的逻辑：
        1.获取消息：
        2.提交消息：
        完整前端代码：
        完整后端代码：

一、Servlet的前后端练习

1.表白墙

在这里插入图片描述

服务器要实现的逻辑：

1.页面加载时，网页要从服务器这里获取到当前表白的数据。（让网页端给服务器发起http请求，服务器返回响应里就带着这些数据）

2.点击提交的时候，网页把用户输入的信息，发送到服务器这边，服务器负责保存

服务器要给页面提供两个http的接口：

1.获取消息：

网页加载的时候，给服务器发起一个ajax请求

	请求:GET/message响应:HTTP/1.1 200 OKContent-Type:application/json[{from:'张三',to:'李四',message:'我喜欢你'},{from:'A',to:'B',message:'我不喜欢你'}		]

1.客户端先发起一个ajax请求

    //直接在script中写的代码会在页面加载时被执行//发起get请求，从服务器获取数据$.ajax({type : 'get',url:'message',//get请求不需要body，也就不需要contentType和datasuccess:function(body){//处理服务器返回的响应数据（json格式的数组）}})

2.服务器收到这个请求，处理请求并进行响应

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setStatus(200);resp.setContentType("application/json;charset-utf8");//setStatus和setContentType必须在getWriter之前。//jackson本身支持把list类型的数据,转换成json数组String respJson = objectMapper.writeValueAsString(messageList);resp.getWriter().write(respJson);}

3.客户端收到响应，针对响应数据进行解析处理，把响应的信息构造成页面元素（html片段），并显示出来

        success:function(body){//处理服务器返回的响应数据（json格式的数组）//响应中，header带有content-Type:application/json。jquery就会自动把json字符串解析成json对象//如果没有带content-Type:application/json.就需要通过js代码：JSON.parse（）方法来手动把json字符串转成json对象let container = document.querySelector('.container')for(let i=0;i<body.length;i++){//body返回的是一个数组，此时message就是获取到的一个json对象let message = body[i]//根据message信息构造html片段let div = document.createElement('div');div.className = 'div1';div.innerHTML = message.from+"对"+message.to+"说"+message.message;container.appendChild(div);}}

2.提交消息：

用户点击提交的时候，ajax给服务器发起一个请求。目的是为了把用户输入的内容，发送到服务器

	请求：POST/messageContent-Type:application/json{from:'张三',to:'李四',message:'我喜欢你'}响应：HTTP/1.1 200 OK

1.ajax给服务器发送请求

        let body = { "from":from,"to":to,"message":message }//body是一个js对象,需要转换成json字符串let jsonString = JSON.stringify(body);//4.把用户填写的内容，发送给服务器，让服务器来保存$.ajax({type:'post',url:'message',contentType:'application/json;charset=utf8',data:jsonString,success:function(body){//收到响应之后要执行的代码}})

前端ajax的url路径，不需要/，后端进行处理时，要带上 /

2.服务器读取请求，并计算出响应

class Message {public String from;public String to;public String message;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}@WebServlet("/message")
//要和发送的请求路径一致
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();private List<Message> messageList = new ArrayList<>();@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Message message = objectMapper.readValue(req.getInputStream(), Message.class);//1.读取数据System.out.println("请求中的数据" + message);//2.进行保存messageList.add(message);//3.返回响应resp.setStatus(200);resp.getWriter().write("ok");}

3.前端代码，处理服务器的响应。

            success:function(responseBody){//success回调函数，不是立即执行的，而是在浏览器返回成功的响应后，才会执行//此处的body是响应中body的内容console.log("responseBody:"+responseBody)}

完整前端代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入jquery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head><body><div class="container"><h1>表白墙</h1><p>请输入相关信息，点击提交数据会显示在表格中</p><div class="div1"><span>谁：</span><input  type="text" class="edit"></div><div class="div1"><span>对谁：</span><input type="text" class="edit"></div><div class="div1"><span>说：</span><input type="text" class="edit"></div><div class="div1"><input type="button" value="提交" class="submit" onclick="Submit()"></div></div>
</body>
<style>*{margin: 0px;padding: 0px;}.container{width: 400px;margin:  auto;}h1{text-align: center;margin-bottom: 40px;}p{text-align: center;color: gray;line-height: 60px;}.div1{display: flex;justify-content: center;align-items: center;}.edit{margin-bottom: 20px;width: 200px;height: 30px;}span{width: 50px;margin-bottom: 20px;}.submit{background-color: goldenrod;color: white;width: 260px;height: 30px;border: none;border-radius: 5px;}.submit:active{background-color: gray;}</style>
<script>function Submit(){let edits = document.querySelectorAll('.edit')console.dir(edits)let from = edits[0].valuelet to =edits[1].valuelet message = edits[2].valueif(from==''||to==""||message==''){return}// 1.获取三个输入框的值console.log(from+""+to+''+message)let div = document.createElement('div')//2.构造divdiv.className='div1'div.innerHTML=from+"对"+to+"说"+messageconsole.log(div)let container = document.querySelector('.container')container.appendChild(div)//3.清空文本框for(let input of edits){input.value=''}let requestBody = { "from":from,"to":to,"message":message }//body是一个js对象,需要转换成json字符串let jsonString = JSON.stringify(requestBody);//（这个body是发送请求的body）//4.把用户填写的内容，发送给服务器，让服务器来保存$.ajax({type:'post',url:'message',contentType:'application/json;charset=utf8',data:jsonString,success:function(responseBody){//success回调函数，不是立即执行的，而是在浏览器返回成功的响应后，才会执行//此处的body是响应中body的内容console.log("responseBody:"+responseBody)}})}//直接在script中写的代码会在页面加载时被执行//发起get请求，从服务器获取数据$.ajax({type : 'get',url:'message',//get请求不需要body，也就不需要contentType和datasuccess:function(body){//处理服务器返回的响应数据（json格式的数组）//响应中，header带有content-Type:application/json。jquery就会自动把json字符串解析成json对象//如果没有带content-Type:application/json.就需要通过js代码：JSON.parse（）方法来手动把json字符串转成json对象let container = document.querySelector('.container')for(let i=0;i<body.length;i++){//body返回的是一个数组，此时message就是获取到的一个json对象let message = body[i]//根据message信息构造html片段let div = document.createElement('div');div.className = 'div1';div.innerHTML = message.from+"对"+message.to+"说"+message.message;container.appendChild(div);}}})
</script></html>

完整后端代码：

import com.fasterxml.jackson.databind.ObjectMapper;
import sun.net.httpserver.HttpServerImpl;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;/*** Created with IntelliJ IDEA.* Description:* User: Lenovo* Author: Weng-Jiaming* Date: 2024-05-10* Time: 15:56*/class Message {public String from;public String to;public String message;@Overridepublic String toString() {return "Message{" +"from='" + from + '\'' +", to='" + to + '\'' +", message='" + message + '\'' +'}';}
}@WebServlet("/message")
//要和发送的请求路径一致
public class MessageServlet extends HttpServlet {private ObjectMapper objectMapper = new ObjectMapper();private List<Message> messageList = new ArrayList<>();@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Message message = objectMapper.readValue(req.getInputStream(), Message.class);//1.读取数据System.out.println("请求中的数据" + message);//2.进行保存messageList.add(message);//3.返回响应resp.setStatus(200);resp.getWriter().write("ok");
//        resp.setContentType("application/json");
//        resp.getWriter().write("{ok:true}");}@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setStatus(200);resp.setContentType("application/json;charset=utf8");//setStatus和setContentType必须在getWriter之前。//jackson本身支持把list类型的数据,转换成json数组String respJson = objectMapper.writeValueAsString(messageList);resp.getWriter().write(respJson);}
}