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

2024-05-13 10:28
文章标签 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);}
}

点击移步博客主页，欢迎光临~

偷cyk的图

这篇关于【网络编程】Servlet的前后端练习 | 表白墙 | 前后端交互 | 提交消息 | 获取消息的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/985435。

相关文章

【Altium】查找PCB上未连接的网络

【Altium】查找PCB上未连接的网络

【更多软件使用问题请点击亿道电子官方网站】 1、文档目标： PCB设计后期检查中找出没有连接的网络 应用场景：PCB设计后期，需要检查是否所有网络都已连接布线。虽然未连接的网络会有飞线显示，但是由于布线后期整板布线密度较高，虚连，断连的网络用肉眼难以轻易发现。用DRC检查也可以找出未连接的网络，如果PCB中DRC问题较多，查找起来就不是很方便。使用PCB Filter面板来达成目的相比DRC
阅读更多...
零基础STM32单片机编程入门(一)初识STM32单片机

零基础STM32单片机编程入门(一)初识STM32单片机

文章目录 一.概要二.单片机型号命名规则三.STM32F103系统架构四.STM32F103C8T6单片机启动流程五.STM32F103C8T6单片机主要外设资源六.编程过程中芯片数据手册的作用1.单片机外设资源情况2.STM32单片机内部框图3.STM32单片机管脚图4.STM32单片机每个管脚可配功能5.单片机功耗数据6.FALSH编程时间，擦写次数7.I/O高低电平电压表格8.外设接口
阅读更多...
16.Spring前世今生与Spring编程思想

16.Spring前世今生与Spring编程思想

1.1.课程目标 1、通过对本章内容的学习,可以掌握Spring的基本架构及各子模块之间的依赖关系。 2、 了解Spring的发展历史，启发思维。 3、 对 Spring形成一个整体的认识，为之后的深入学习做铺垫。 4、 通过对本章内容的学习，可以了解Spring版本升级的规律，从而应用到自己的系统升级版本命名。 5、Spring编程思想总结。 1.2.内容定位 Spring使用经验
阅读更多...
通信系统网络架构_2.广域网网络架构

通信系统网络架构_2.广域网网络架构

1.概述          通俗来讲，广域网是将分布于相比局域网络更广区域的计算机设备联接起来的网络。广域网由通信子网于资源子网组成。通信子网可以利用公用分组交换网、卫星通信网和无线分组交换网构建，将分布在不同地区的局域网或计算机系统互连起来，实现资源子网的共享。 2.网络组成          广域网属于多级网络，通常由骨干网、分布网、接入网组成。在网络规模较小时，可仅由骨干网和接入网组成
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
移动硬盘盒：便携与交互的完美结合 PD 充电IC

移动硬盘盒：便携与交互的完美结合 PD 充电IC

在数字化时代的浪潮中，数据已成为我们生活中不可或缺的一部分。随着数据的不断增长，人们对于数据存储的需求也在不断增加。传统的存储设备如U盘、光盘等，虽然具有一定的便携性，但在容量和稳定性方面往往难以满足现代人的需求。而移动硬盘，以其大容量、高稳定性和可移动性，成为了数据存储的优选方案。然而，单纯的移动硬盘在携带和使用上仍存在诸多不便，于是，移动硬盘盒应运而生，以其独特的便携性和交互性，成为了数据存储
阅读更多...
【青龙面板辅助】JD商品自动给好评获取京豆脚本

【青龙面板辅助】JD商品自动给好评获取京豆脚本

1.打开链接 开下面的链接进入待评价商品页面 https://club.jd.com/myJdcomments/myJdcomments.action?sort=0 2.登陆后执行脚本 登陆后，按F12键，选择console，复制粘贴以下代码，先运行脚本1，再运行脚本2 脚本1代码 可以自行修改评价内容。 var content = '材质很好，质量也不错，到货也很快物流满分，包装快递满
阅读更多...
BD错误集锦4——IDEA编程连接hbase失败，put操作一直没有通过，并且无异常信息

BD错误集锦4——IDEA编程连接hbase失败，put操作一直没有通过，并且无异常信息

参考文章：https://blog.csdn.net/ZJ18712852367/article/details/81938524
阅读更多...
JavaWeb系列六: 动态WEB开发核心(Servlet) 上

JavaWeb系列六: 动态WEB开发核心(Servlet) 上

韩老师学生 官网文档为什么会出现Servlet什么是ServletServlet在JavaWeb项目位置Servlet基本使用Servlet开发方式说明快速入门- 手动开发 servlet浏览器请求Servlet UML分析Servlet生命周期GET和POST请求分发处理通过继承HttpServlet开发ServletIDEA配置ServletServlet注意事项和细节 Servlet注
阅读更多...
IPython小白教程：提升你的Python交互式编程技巧，通俗易懂！

IPython小白教程：提升你的Python交互式编程技巧，通俗易懂！

IPython是一个增强的Python交互式shell，它提供了丰富的功能和便捷的交互方式，使得Python开发和数据分析工作更加高效。本文将详细介绍IPython的基本概念、使用方法、主要作用以及注意事项。 一、IPython简介 1. IPython的起源 IPython由Fernando Pérez于2001年创建，旨在提供一个更高效的Python交互式编程环境。 2. IPyt
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2