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


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



目录
相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
56 0
|
8天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
37 3
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
47 5
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
44 4
|
1月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
48 3
|
1月前
|
网络协议 前端开发 数据处理
11 Web交互知识你了解吗?
路老师带你深入PHP世界,纯干货分享。本文从Web工作原理讲起,介绍了HTTP协议和Web数据处理流程,重点讲解了PHP如何获取表单数据,包括POST和GET方法的具体实现及示例代码。适合初学者入门,助你掌握PHP核心技术。
30 1
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
56 4
|
1月前
|
前端开发 JavaScript 数据处理
前端界的宝藏技术:掌握这些,让你的网页秒变交互神器!
【10月更文挑战第31天】前端开发藏有众多宝藏技术,如JavaScript异步编程和Web Components。异步编程通过Promise、async/await实现复杂的网络请求,提高代码可读性;Web Components则允许创建可重用、封装良好的自定义组件,提升代码复用性和独立性。此外,CSS动画、SVG绘图等技术也极大丰富了网页的视觉和交互体验。不断学习和实践,让网页秒变交互神器。
32 2
|
2月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
122 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
53 1