【网络编程】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。

相关文章

Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
Python版本信息获取方法详解与实战

Python版本信息获取方法详解与实战

《Python版本信息获取方法详解与实战》在Python开发中,获取Python版本号是调试、兼容性检查和版本控制的重要基础操作,本文详细介绍了如何使用sys和platform模块获取Python的主... 目录1. python版本号获取基础2. 使用sys模块获取版本信息2.1 sys模块概述2.1.1
阅读更多...
Java发送SNMP至交换机获取交换机状态实现方式

Java发送SNMP至交换机获取交换机状态实现方式

《Java发送SNMP至交换机获取交换机状态实现方式》文章介绍使用SNMP4J库（2.7.0）通过RCF1213-MIB协议获取交换机单/多路状态,需开启SNMP支持,重点对比SNMPv1、v2c、v... 目录交换机协议SNMP库获取交换机单路状态获取交换机多路状态总结交换机协议这里使用的交换机协议为常
阅读更多...
MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决

《MyBatis/MyBatis-Plus同事务循环调用存储过程获取主键重复问题分析及解决》MyBatis默认开启一级缓存,同一事务中循环调用查询方法时会重复使用缓存数据,导致获取的序列主键值均为1,... 目录问题原因解决办法如果是存储过程总结问题myBATis有如下代码获取序列作为主键IdMappe
阅读更多...
C#使用iText获取PDF的trailer数据的代码示例

C#使用iText获取PDF的trailer数据的代码示例

《C#使用iText获取PDF的trailer数据的代码示例》开发程序debug的时候,看到了PDF有个trailer数据,挺有意思,于是考虑用代码把它读出来,那么就用到我们常用的iText框架了,所... 目录引言iText 核心概念C# 代码示例步骤 1: 确保已安装 iText步骤 2: C# 代码程
阅读更多...
Python实现简单封装网络请求的示例详解

Python实现简单封装网络请求的示例详解

《Python实现简单封装网络请求的示例详解》这篇文章主要为大家详细介绍了Python实现简单封装网络请求的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录安装依赖核心功能说明1. 类与方法概览2.NetHelper类初始化参数3.ApiResponse类属性与方法使用实
阅读更多...
Spring Boot中获取IOC容器的多种方式

Spring Boot中获取IOC容器的多种方式

《SpringBoot中获取IOC容器的多种方式》本文主要介绍了SpringBoot中获取IOC容器的多种方式,包括直接注入、实现ApplicationContextAware接口、通过Spring... 目录1. 直接注入ApplicationContext2. 实现ApplicationContextA
阅读更多...
MySQL的JDBC编程详解

MySQL的JDBC编程详解

《MySQL的JDBC编程详解》：本文主要介绍MySQL的JDBC编程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言一、前置知识1. 引入依赖2. 认识 url二、JDBC 操作流程1. JDBC 的写操作2. JDBC 的读操作总结前言本文介绍了mysq
阅读更多...
python获取指定名字的程序的文件路径的两种方法

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目，需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径，以下
阅读更多...
SpringBoot 获取请求参数的常用注解及用法

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法：1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2