HTML表单如何和服务器交互

最近突然对这个话题比较感兴趣，就想写一写，就当作是学习笔记了。

经过搜索发现总共有两种方式，一种是GET，一种是POST。

POST请求

1.浏览器端代码

Name: 
E-mail: 

action 属性 =welcome.php 意思是说这个表单的数据要交给服务器的welcome.php 处理。

method="post" 意思是说发送这个表单用的是post方法，下面会谈具体谈到。

name="name" name="email" 为什么要有这个name属性？因为input是需要我们输入数据的，那么总得需要一个保存数据的东西。name="name" name="email"的意思就是定义了两个变量，一个是name变量，一个是email变量，前者用来存储用户输入的用户名，后者用来存储用户输入的email地址。

type="submit" 意思是产生一个确认按钮，用户点击一下，就会发送一个包含表单数据的请求到服务器。

2.在开发者工具中查看POST请求

在name这个input中我输入了terry，在email这个input中我输入了[email protected],然后点击确认按钮，在chrome的network一栏中找到了这个post请求，它是这个样子的。

https://www.w3schools.com/php/welcome.php

在这个URL中并没有携带我们输入的数据，那么这些数据在哪里呢?在Header的Form Data里面可以看到，如下图：

image.png

3.服务器端是如何获取浏览器端的表单数据的？

在 welcome.php 中通过 $_POST['name'] 和 $_POST['email']这两个变量即可 获取表单中的内容。

GET请求

1.浏览器端代码

Name: 
E-mail: 

和post请求差不多，唯一不同的地方就在于method，一个是POST，一个是GET。

2.在开发者工具中查看GET 请求

在name这个input中我输入了terry，在email这个input中我输入了[email protected],然后点击确认按钮，在chrome的network一栏中找到了这个get请求，它是这个样子的。

https://www.w3schools.com/php/welcome.php?name=terry&email=10000%40qq.com

在这个URL中可以看到表单中的数据，其中？号以后就是具体的表单参数，它们是以“变量名和值”成对出现的，每个“变量名和值”之间以&分隔开。同样，我们可以在这个请求的Header中看到它们。

image.png

3.服务器端是如何获取浏览器端的表单数据的？

在welcome.php中通过$_GET["name"]和$_GET["email"]来获取表单中的数据。

OK，总结一下，不管是POST请求还是GET请求，表单数据最后都是以
变量-值 这样的形式传递给服务器的，而且chrome浏览器是可以捕获这些“变量-值”的，貌似不能直接修改这些变量的值，不过听说有一个叫BurpSuite的东西很好用，可以修改请求中的数据。原理是很简单，就是把浏览器的代理地址设置为127.0.0.1:8080，而BurpSuite是会监听这个地址的，然后BurpSuite把监听到的数据交给用户，用户可以随便修改数据，然后再把这个数据发送给目标服务器。