【学习笔记】Web前端到后端数据的交互

简介: 【学习笔记】Web前端到后端数据的交互

使用工具

🚄

本次使用的工具:

1.IDEA社区版

2.Sevlet

3.MySQL

4.MySQL驱动




完成HTML代码

在写前后端交互的时候,首先我们肯定需要有我们的前端页面。现在我们的前端就默认HTML5。


<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="add" method="get">
    账号:<input type="text" name="zh"><br>
    <input type="submit" value="添加">
</form>
</body>
</html>


我们也在上一篇HTNL入门的文章讲到过通过表发送数据到指定的程序。


我们能看见我们的action他是指定一个add地方,这个是我们所需要掌握的核心。待会我们会在Java中配置一个xml文件会用到这个add。


复习上次的内容:


表单 form

一般我们都会通过表单对从一个html到其他文件的跳转作用。


语法:


<form action="C:\Users\admin\Desktop\HTML\deom2.html" method="post">
   账号:<input type="text" name = "Nickname"> <br/>
   密码:<input type="password" name = "pwd"><br/>
   <input type="submit" value = "提交" />
   </form>


✨action:表示请求的文件地址。


✨method:表示请求的方法,一般有post,get。


web.xml的配置

web.xml这个可能有的小伙帮并不是很熟悉,首先我们先来介绍一下web.xml.


一般的web工程中都会用到web.xml,web.xml主要用来配置,可以方便的开发web工程。web.xml主要用来配置Filter、Listener、Servlet等。但是要说明的是web.xml并不是必须的,一个web工程可以没有web.xml文件。


一般情况下web.xml的加载过程是这样的:

image.png



如果对这个地方还不是很明白的话建议大家可以去手动的查一下,并且好好记录。


首先声明一下:IDEA社区版中因为没有web开发模块,所以这个web.xml文件需要自己去配置和导入。


<?xml version="1.0" encoding="utf-8" ?>
<web-app
        xmlns:th="http://www.w3.org/1999/xhtml"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns="http://xmlns.jcp.org/xml/ns/javaee"
        xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
     http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
        id="WebApp_ID" version="4.0">
        <servlet>
<!--            servlet -name 记录和Java程序一样的名字-->
            <servlet-name>demo01</servlet-name>
<!--            servlet -class 记录Java类的全部名称-->
            <servlet-class >dem0.demo01</servlet-class>
            <!--将demo包下的hello类命名为hello -->
        </servlet>
        <servlet-mapping>
            <servlet-name>demo01</servlet-name>
<!--            url - pattern 记录前端页面表格发送的地址 !!:记住有个“/”-->
            <url-pattern>/add</url-pattern>
        </servlet-mapping>
</web-app>




上面的代码直接拿去复制即即可,注释都在上面,只需要改一下参数即可。


补充一下servlet:


用来声明一个servlet的数据,主要有以下子元素:


指定servlet的名称

指定servlet的类名称

指定web站台中的某个JSP网页的完整路径

用来定义参数,可有多个init-param。在servlet类中通过getInitParamenter(String name)方法访问初始化参数

指定当Web应用启动时,装载Servlet的次序。当值为正数或零时:Servlet容器先加载数值小的servlet,再依次加载其他数值大的servlet。当值为负或未定义:Servlet容器将在Web客户首次访问这个servlet时加载它。

用来定义servlet所对应的URL,包含两个子元素

指定servlet所对应的URL


后端获取前端传递的数据

上述我们讲过了我们能通过前端的form表单把表单中的数据传递个后端,例如输入框,单选框,多选框,文本域,文件域等。


1.在后端能通过name相对应的属性来获取相对应的值。

2.能通过action提交数据的地址。

3.method表示提交的方式,大多数为get和post。


当我们提交了数据,然后数据会发送到服务器上面,并通过Tomcat来进行处理。当Tomcat得到请求后会通过Servlet来进行相对应的处理,最后通过后端的Java程序来得到前端所传输的数据。


image.png


最后我们打开我们的Java程序:


public class quest extends HttpServlet  {
    @Override
    //这个地方的请求方式要和from表单上面写的一样的。
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");//设置编码
        String hello = req.getParameter("hello");//获取前端的数据
        System.out.println(hello);


最后我们就能完成一次前端到后端的数据交互了。



目录
相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
31 3
|
15天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
19天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
19天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
17 3
|
19天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
33 2
|
16天前
|
API 持续交付 开发者
后端开发中的微服务架构实践与挑战
在数字化时代,后端服务的构建和管理变得日益复杂。本文将深入探讨微服务架构在后端开发中的应用,分析其在提高系统可扩展性、灵活性和可维护性方面的优势,同时讨论实施微服务时面临的挑战,如服务拆分、数据一致性和部署复杂性等。通过实际案例分析,本文旨在为开发者提供微服务架构的实用见解和解决策略。
|
9天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
8天前
|
JSON 前端开发 API
后端开发中的API设计与文档编写指南####
本文探讨了后端开发中API设计的重要性,并详细阐述了如何编写高效、可维护的API接口。通过实际案例分析,文章强调了清晰的API设计对于前后端分离项目的关键作用,以及良好的文档习惯如何促进团队协作和提升开发效率。 ####
|
10天前
|
存储 SQL 数据库
深入浅出后端开发之数据库优化实战
【10月更文挑战第35天】在软件开发的世界里,数据库性能直接关系到应用的响应速度和用户体验。本文将带你了解如何通过合理的索引设计、查询优化以及恰当的数据存储策略来提升数据库性能。我们将一起探索这些技巧背后的原理,并通过实际案例感受优化带来的显著效果。
28 4
|
9天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端开发
【10月更文挑战第36天】本文将引导您探索Node.js的世界,通过实际案例揭示其背后的原理和实践方法。从基础的安装到高级的异步处理,我们将一起构建一个简单的后端服务,并讨论如何优化性能。无论您是新手还是有经验的开发者,这篇文章都将为您提供新的视角和深入的理解。