3.7 一对好兄弟——Get请求和Post请求
前面提到的表单十分重要，因为它最大的作用是帮助用户提交一些数据给服务器端的程序，这个过程就是客户端在向服务器端发送请求，以便获取和提交数据。根据需求的不同，最常见的请求方式有两种：Get（请求资源）和Post（提交数据）。
3.7.1 数据在地址栏中的Get请求
Get请求是向服务器发出获取资源的请求，比如通过输入百度的网址，希望服务器能够将百度首页返回，这是典型的获取数据。
当我们在百度搜索框，输入查询关键字，如新浪，地址栏中会出现https://www.baidu.com/s?wd=新浪...，你会发现在网址中有“?wd=新浪”的字样，这表示你提交的查询网页中含有新浪关键字的所有网页和资源。最终，百度会搜索出很多页的结果列表，这个也属于Get请求。
3.7.2 数据在隐秘处的Post请求
Post请求一般是指你要提交数据到服务器，比如注册一个账号、上传一篇文章、上传图片或视频、发表一条评论，并不需要服务器返回给你什么，而是向服务器提交数据。
接下来，让我们通过一个任务进一步了解表单在两种不同请求方式下的不同表现。请你在HBuilderX中输入如图3.12所示的代码。
图3.12
注意，这个登录表单的请求方式是get，即method=“get”，在登录框中输入用户名和密码，如图3.13所示。
图3.13
并单击登录按钮后，在地址栏中的变化如图3.14所示。
图3.14
可以看到输入的用户名和密码信息出现在地址栏上，这个就是get请求的特点之一，它将你提交的信息以明文的方式显示在地址栏中。
那么，如果我们把表单的提交方式改成post，你自己试试看有什么不一样？如图3.15所示只改动一处，注意这里没有发送给百度服务器，因为百度不支持外部的post请求。因此，这里我们发送本地服务器上的处理表单请求的login.php文件。
图3.15
你会发现，当请求方式改为post后，用户名和密码等信息没有在地址栏中显示。那它们是丢了吗？当然不是，post请求是采用一种隐蔽的方式提交数据，不信你可以按下【F12】打开测试工具，找找Request Headers下的Form Data部分，就能看到它们了，如图3.16所示。
图3.16
请你想一想，如果你的数据是一份文件，你要采用get还是post呢？
答：当然是post了，因为地址栏的容量是有限的，从上传数据量的大小来看，get只能支持小数据量的信息，而post则支持较大数据量的信息。
补充重点
（1）HTML的标签和标记可以互换使用，但是有时还会出现第三个同义词——元素。严格来说，元素与标签是不太一样的。不同之处在于，标签强调的是单个标记，而元素则是由开始标签、内容、结束标签组成的。当然，内容允许为空。这里我们用元素比较少，而它在CSS和JavaScript章节会频繁出镜。
（2）块级元素（block level element）和内联元素（inline element）：它们最大的区别是块级元素在浏览器中显示时，会从新的一行来开始，且行前和行后都会有一定间距，常见的块级元素包括＜h1＞、＜p＞、＜ul＞、＜ol＞、＜table＞、＜div＞等；而内联元素，除非其内容的宽度占满整个页面宽度，否则不会换行，常见的内联元素包括＜span＞、＜b＞、＜td＞、＜a＞、＜img＞等。
（3）Get请求和Post请求的区别需要掌握，如果你需要向服务器提交一些简单的数据，比如关键字查询参数，则可以考虑使用Get请求；如果你要发送用户名和密码之类的重要数据，则建议你用Post请求。另外，Post请求支持的数据量也比Get请求更大一些。
除此之外，其实前端向后端发送获取数据的请求方式一共有4种，除了Get和Post外，还有Put和Delete，只是这些比较少使用，所以本章没有提及，你感兴趣的话，可以自行阅读相关介绍。