hualinux 编程概念 3.6：浏览器是如何和网站交互数据的（新手必看！）

我看到不少初级运维，连前后怎么向后端提交数据的都不懂！一问就回了一句“没学过开发”，那个汗颜啊~~

所以本章打算教一下前后使用HTML，后端使用PHP，做一个简单的向网站提交数据，主要使用GET和POST两种方式

如果没基础，没关系直接看《HTML教程》主要使用的是的表单部分，如果你真的很懒，你也可以直接不看

php可以看《PHP教程》，也可以不看，主要是输出你提交的数据而已。

此教程

TML使用的是本地win7编写的，我这里使用webStorm进行HTML编写，也可以不要，直接复制我的代码也行。
PHP使用的是LNMP，搭建可以看我的《hualinux2.5 环境搭建：centos8安装LNMP》，使用PHPStorm编写PHP，也可不要

一、HTML语法（熟悉可跳过）

1.1 使用语法

<标签>内容</标签>

注：新的html5如果内容没有可以写成<标签/>

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

固定格式为：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--在这里写内容就行了--> 
</body>
</html>

上面的每对标签只能出现一次，在<body>...</body>之间写东西就行了，可以嵌套其它标签，有兴趣可以看《HTML教程》

1.2 HTML标签英文全称

有些人反映老是记不住HTML标签，这里我贴出全称

HTML标签	英文全称	中文释义
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
dfn	Defines a Definition Term	定义定义条目
kbd	Keyboard	键盘（文本）
samp	Sample	示例（文本
var	Variable	变量（文本）
tt	Teletype	打印机（文本）
code	Code	源代码（文本）
pre	Preformatted	预定义格式（文本）
blockquote	Block Quotation	区块引用语
cite	Citation	引用
q	Quotation	引用语
strong	Strong	加重（文本）
em	Emphasized	加重（文本）
b	Bold	粗体（文本）
i	Italic	斜体（文本）
big	Big	变大（文本）
small	Small	变小（文本）
sup	Superscripted	上标（文本）
sub	Subscripted	下标（文本）
bdo	Direction of Text Display	文本显示方向
br	Break	换行
center	Centered	居中（文本）
font	Font	字体
u	Underlined	下划线（文本）
s/ strike	Strikethrough	删除线
div	Division	分隔
span	Span	范围
ol	Ordered List	排序列表
ul	Unordered List	不排序列表
li	List Item	列表项目
dl	Definition List	定义列表
dt	Definition Term	定义术语
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
ins	Inserted	插入（的文本）
h1~h6	Header 1 to Header 6	标题1到标题6
p	Paragraph	段落
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
alt	alter	替用(一般是图片显示不出的提示)
src	Source	源文件链接
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
nl	navigation lists	导航列表
tr	table row	表格中的一行
th	table header cell	表格中的表头
td	table data cell	表格中的一个单元格

<a> anchor 定义锚 
<abbr> abbreviation 定义缩写 
<acronym>  定义只取消首字母的缩写 
<address> 定义地址元素 
<area> 定义图像映射内部的区域 
<b> bold 定义粗体字 
<base> 定义页面当中的所有链接的基准链接 
<bdo>  bidirectional override 定义文字的显示方向 
<big> 定义大号字 
<blockquote> 定义长的引用 
<body> 定义body元素 
<br> break 插入一个回车 
<button> 定义按钮 
<caption> 定义表格标题 
<cite> citation 定义引用 
<code> computer code 定义计算机代码文本 
<col> column 定义用于表格列的属性 
<h1>to<h6> 定义标题1到标题6 
<head> 定义关于文档的信息 
<hr> horizontal 定义水平线 
<html> hypertext markup language 定义html文档 
<i> italic 定义斜体字 
<iframe> inline frame 定义内联框架 
<img> image 定义图像 
<input>  定义输入域 
<ins> inserted 定义被插入的文本 
<kbd> keyboard 定义键盘文本 
<label> 定义针对表单控件的标签 
<legend> 定义框架集的标题 
<li> list item 定义列表的项目 
<link> 定义资源引用 
<map> 定义图像映射 
<meta> 定义元信息 
<noframe> 定义无框架的节 
<noscript> 定义无脚本的节 
<object> 定义内嵌对象 
<ol> ordered list 定义有序列表 
<optgroup> option group 定义选项组 
<option> 定义下拉列表的选项 
<p> paragraph 定义段落 
<param> 定义对象的参数 
<pre> preformatted 定义预格式文本 
<q> quotation 定义短的引用 
<samp> sample 定义计算机代码样本 
<script> 定义脚本 
<select> 定义选择列表 
<small> 定义小字体文本 
<span> 定义文档中的节 
<strong> stronger empasis定义强调文本 
<style> 定义样式的定义 
<sub> subscript 定义下标文本 
<sup> superscript 定义上标文本 
<table> 定义表格 
<tbody> table body 定义表格的主体部分 
<td> table data cell定义表格单元 
<textarea> 定义文本区域 
<tfoot> table foot定义表也的脚注 
<th> table header cell定义表格的表头单元格 
<thead> table head定义表格的标题 
<title> 定义文档的标题 
<tr> table row定义表格的行 
<tt> teletype 定义打字机文本 
<ul> unordered list 定义无序列表 
<var> variable 定义变量

二、PHP语法（可以跳过）

<?
;php代码

php语法很简单可以看《PHP教程》和《PHP官方中文文档》

本文只用到 “$_GET 变量”和“$_POST 变量”

三、编写交互代码

3.1 需求及讲解

3.1.1 需求

上图填写“名字”“留言”点提交，就显示你的名字和留言的内容，
名字：hua
留言：php是世界上最好的语言
效果如下图所示：

要求使用get和post两种方式提交，并对比一下不同的地方

3.1.2 分析

HTML提交数据使得的是表单，表单是用于向服务器传输数据用的，

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

有兴趣的可以看一下《HTML表单》

我在这里HTML中可以使用的是<input>的text和 <textarea>实现

php的get方法可以使用$_GET，而post可以使用 $_POST

3.2 GET方式实现

3.2.1 HTML代码及解说

html代码，我放在桌面了，大家可以用记事本编写，然后另存为index.html就行了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<form method="get" action="http://192.168.3.11/note.php" enctype="application/x-www-form-urlencoded">
    名字：<input type="text" name="username"><br>
    留言：<br><textarea name="note" cols="30" rows="5" placeholder="请输入你的留言"></textarea><br>
    <input type="submit" value="提交">
</form>


</body>
</html>

注解：

form属于解说：

method="get"：表示使用get方式，如果使用post可以把get改为post

action="http://192.168.3.11/note.php"：表示处理这个get请求的文件路径，我的php文件在服务器上，路径是http://192.168.3.11/note.php

enctype：属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。

值描述
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data
不对字符编码。

在使用包含文件上传控件的表单时，必须使用该值。

text/plain 空格转换为 "+" 加号，但不对特殊字符编码。

值	描述
application/x-www-form-urlencoded	在发送前编码所有字符（默认）
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 "+" 加号，但不对特殊字符编码。

input说明：标签用于搜集用户信息。

根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

type="text"：表示是文本框，还有其它一堆类型，我这里就不说了，有求个可以看一下<input>

name：表示这个控制的名字，一定要写的！

from提交数据是 name属的值，以及value的值，如果少了name属性是不会提交的！！

就是因为见到不少初学者都犯这个错误

提交按键 type="submit"：必需写！这个是提交的意思，没有name，因为它只负责把form标签中包含有name的都提交到服务器中。

textarea：标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

属性不说了，自己看

3.2.2 php代码及解说

我在PHP服务器上note.php代码为

<?php
echo $_GET['username'].'留言是：</br>';
echo '<pre style="border: 3px solid olivedrab;width: 25%">'.$_GET['note'].'</pre>';

解说：

echo：输出的意思，如果有个字符串连接使用点号.

$_GET：

预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值。

从带有 GET 方法的表单发送的信息，对任何人都是可见的（会显示在浏览器的地址栏），并且对发送信息的量也有限制。

<pre style="border: 3px solid olivedrab;width: 25%">：

我加入的html标签，效果就是加一个绿色的框围着

3.2.3 运行效果并get分析

打开HTML我的放在桌面上，用的是火狐浏览器打开，输入如下图内容：

，

效果如下：

在上图中我们看URL地址的变化

http://192.168.3.11/note.php?username=hua&note=php是世界上最好的语言，get方式
上面中

http://192.168.3.11/note.php：访问的是PHP服务器的note.php文件

问号?：连接作用，一般表示后是传参数的，可以理解为连接参数的作用

username=hua&note=php是世界上最好的语言，get方式：

这些就是参数，对应的是form表单标签中含有name属性及值，第一个是我在html使用的是input的文本，name设置为username，value的值为hua，它们形式是
name的值=value的值
所以我这里是username=hua，同理那2个也一样，这里不就说了

&：不同参数的间隔符，我这里有2对参数，所以使用了&连接号

有些眼尖的人还看到你自己发送的内容在URL上显示了！！！对，这就是get方式，直接以明文方式在URL使用参数提交的！所以使用用户名和密码登陆方式，不能使用get方式！！

我这里再在火狐浏览器上按F12，会弹出开发者工具菜单，选择“网络”

再退回再次提交看一下，发现会有很多东西可以看，如下图所示：

再点一下响应头

这些东西我就不理解了，有兴趣可以看一下《图解HTTP》

3.3 使用post方式提交

3.3.1 HTML代码

只需要把method方式改为post就行了，其它不需要修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<form method="post" action="http://192.168.3.11/note.php" enctype="application/x-www-form-urlencoded">
    名字：<input type="text" name="usernmae"><br>
    留言：<br><textarea name="note" cols="30" rows="5" placeholder="请输入你的留言"></textarea><br>
    <input type="submit" value="提交">
</form>

</body>
</html>

3.3.2 PHP代码

把$_GET改为$_POST

<?php
echo $_POST['username'].'留言是：</br>';
echo '<pre style="border: 3px solid olivedrab;width: 25%">'.$_POST['note'].'</pre>';

3.3.3 效果并分析

按下图输入内容并提交：

效果如下图所示：

发现post提交并不像get提交URL上会多出一些东西，连提交的内容都是明文显示的。这里是什么都没有看到，但数据的确提交到服务器上了。

所以说post提交适合于

1.不想别人看到内容的，如用户名和密码

2.提交大的数据，一般get提交的数据不能超过4k，有的浏览器是8k，决定于浏览器，毕竟URL长度是有限的