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


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



目录
相关文章
|
23天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
38 3
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
43 0
|
14天前
|
存储 SQL API
探索后端开发:构建高效API与数据库交互
【10月更文挑战第36天】在数字化时代,后端开发是连接用户界面和数据存储的桥梁。本文深入探讨如何设计高效的API以及如何实现API与数据库之间的无缝交互,确保数据的一致性和高性能。我们将从基础概念出发,逐步深入到实战技巧,为读者提供一个清晰的后端开发路线图。
|
9天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
14天前
|
网络协议 前端开发 数据处理
11 Web交互知识你了解吗?
路老师带你深入PHP世界,纯干货分享。本文从Web工作原理讲起,介绍了HTTP协议和Web数据处理流程,重点讲解了PHP如何获取表单数据,包括POST和GET方法的具体实现及示例代码。适合初学者入门,助你掌握PHP核心技术。
23 1
|
20天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
19天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
33 1
|
24天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
24 3
|
24天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
36 2
|
1月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
下一篇
无影云桌面