【学习笔记】Web前端到后端数据的交互
📒博客首页：*铁甲小宝同学* 📒
🌞文章目的：
HTML—入门篇🌞🙏博主也在学习阶段，如若发现问题，请告知，非常感谢🙏
💗
同时也非常感谢各位小伙伴们的支持💗🌈每日一语：拿的起放的下！ 🌈
🍒本文参考了尚硅谷的最新JavaWeb🍒
文章目录
- 【学习笔记】Web前端到后端数据的交互
- 前言
- 使用工具
- 完成HTML代码
- 表单 form
- web.xml的配置
- 后端获取前端传递的数据
前言
相信大家都在一些网站上面经历过注册和登录过，当我们在登录的时候点击提交那个按键的时候，此时网站其实就首先对后端发送数据，然后后端程序会读取数据库的数据并判断我们的账号和密码是否正确，这个地方就是通过前端把数据发送到后端，这也是我们今天的主要内容。
本篇博客简单记录使用Java和HTML5，用前端页面发送数据到后端接受并处理！也很希望本篇博客能带给大家帮助！！！
吾知所学，献给诸君，愿诸君得有所获。
使用工具
🚄
本次使用的工具：
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的加载过程是这样的：
如果对这个地方还不是很明白的话建议大家可以去手动的查一下，并且好好记录。
首先声明一下：IDEA社区版中因为没有web开发模块，所以这个web.xml文件需要自己去配置和导入。
<?xml version="1.0" encoding="utf-8" ?>
<web-appxmlns: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/javaeehttp://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程序来得到前端所传输的数据。
最后我们打开我们的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);
最后我们就能完成一次前端到后端的数据交互了。
未完待续
