【学习笔记】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);


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



相关文章
|
3天前
|
SQL 缓存 搜索推荐
后端技术在现代Web开发中的应用与挑战
本文将深入探讨后端技术在现代Web开发中的重要性,涵盖从基础架构到性能优化的多个方面。通过分析当前主流后端技术的优缺点,并提供一些实用的解决方案和建议,帮助开发者更好地应对日常开发中的挑战。
15 1
|
8天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
22 11
|
2天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
8天前
|
前端开发
|
8天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
8天前
|
安全 JavaScript Java
后端技术在现代Web开发中的实践与挑战
本文旨在探讨后端技术在现代Web开发中的关键作用,分析其在数据处理、业务逻辑实现和系统安全等方面的重要性。通过阐述常见的后端技术和框架,如Node.js、Django和Spring Boot,展示它们在实际项目中的应用。同时,文章将讨论后端开发所面临的主要挑战,包括性能优化、扩展性和维护性问题,以及如何应对这些挑战。最终,通过对实际案例的分析,总结出一套行之有效的后端开发最佳实践,为开发者提供参考。
31 5
|
8天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
8天前
|
人工智能 关系型数据库 数据安全/隐私保护
后端技术在现代Web开发中的应用与挑战
本文将深入探讨后端技术在现代Web开发中的重要性,通过分析其在数据处理、业务逻辑实现和安全性保障方面的应用,揭示后端技术的核心价值。同时,本文还将讨论当前后端开发面临的主要挑战,如高并发处理、数据安全、微服务架构的复杂性等,并给出相应的解决方案。无论是后端开发者还是对后端技术感兴趣的读者,都可以通过这篇文章获得启发和指导。
|
20天前
|
数据库 开发者 Python
web应用开发
【9月更文挑战第1天】web应用开发
34 1
|
8天前
|
数据可视化 图形学 UED
只需四步,轻松开发三维模型Web应用
为了让用户更方便地应用三维模型,阿里云DataV提供了一套完整的三维模型Web模型开发方案,包括三维模型托管、应用开发、交互开发、应用分发等完整功能。只需69.3元/年,就能体验三维模型Web应用开发功能!
32 8
只需四步,轻松开发三维模型Web应用

热门文章

最新文章