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


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



目录
相关文章
|
存储 前端开发 安全
前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
本文全面解析前端三种数据存储方式:Cookie、LocalStorage与SessionStorage。涵盖其定义、使用方法、生命周期、优缺点及典型应用场景,帮助开发者根据登录状态、用户偏好、会话控制等需求,选择合适的存储方案,提升Web应用的性能与安全性。(238字)
570 0
|
4月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
515 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
448 60
|
6月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
79 2
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
354 3
|
9月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
10月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
676 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
监控 前端开发 Java
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
410 9
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
453 5