起步 - POST参数

  1. form标签
  2. 详细了解POST

  • 作者：KK

  • 发表日期：2016.4.12

之前在GET参数章节中教大家通过URL地址传递GET参数，本章节将教大家在网页代码中传递POST参数

POST参数和GET参数是相同性质的东西，只是变量名不同，传输方式不同，$_GET是一个数组，代表了GET参数，而对应的也有一个$_POST数组，代表了POST参数

要构造POST参数，简单的做法就是用form标签实现，我的博客教程在以前没教过大家合作form标签，因为我觉得那时候讲这个的话又没有服务端语言那就不好解说它的作用，所以留到这里讲

form标签

form标签用于构造表单,而表单的作用通常就是向服务端发送数据，写起来和普通标签没什么两样:

<form>
	这里是form标签包住的内容
</form>

但是一般情况下都会为它添加action和method两个属性

action属性的值是一个网址，并且这个网址能触发一个PHP脚本的运行

而method属性通常有GET和POST两个值（其实有更多，但我们平时只用这两个）,在本章节中为了配合内容学习我们写POST这个值吧，这样才能构造POST参数

假设我们再提供一个PHP脚本作为测试脚本，命名为b.php,那么form标签的HTML代码应该就是这样子:

<form action="http://localhost/b.php" method="POST">
	这里是form标签包住的内容

但是你会发现就算你写了这个标签，网页上也不会呈现任何东西，是透明的是吧!?告诉你哦，其实form标签不是用来看的东西，它就像ul标签一样，ul不可见，它是用来包li的，form也是用来包别的东西的，所以这样还不足以发送POST参数

form标签里面可以包很多不同的东西，包括div,a,span,ul,li什么的随便你，可是我咱们要实现发送POST参数的话，要在form里放某一类标签才可以，它们就是input输入框、checkbox和radio选项、select下拉选择以及textarea输入域

先来试试吧，你在localhost的目录下开个比如叫form.html的文件，在body里面构造一个这样的HTML代码：

<form action="/test.php" method="post">
	<input name="age" type="text" placeholder="在此输入年龄，比如18"/>
	<button type="submit">发送POST数据</button>
</form>

效果是这样的：

然后另外还要在同目录下建一个test.php的文件写以下PHP代码:

print_r($_POST);

其实就是输出$_POST数组

准备好后就通过http://localhost/form.html访问主机这个测试页面，在输入框中输入一个数字算是年龄

然后点击那个button按钮，此时会发生网页跳转，网址变成了http://localhost/test.php,并且输出了一个数组

这个数组就是前端写了form标签之后构造过来的，看到数组有个叫age的键了吧，这个对应前端那个input的name属性，而数组的值就是我们在这个框里输入的值

这样就实现了html文件通过POST向php传递数据了，接下来咱们详解一下这个post吧，因为不学了解这个，你在工作中会非常非常的吃亏!

详细了解POST

form标签不是可见的东西

就像上面例子一样:

<form action="/test.php" method="post">
	<input name="age" type="text" placeholder="在此输入年龄，比如18"/>
	<button type="submit">发送POST数据</button>
</form>

这段代码中的form标签部分并不是可以在网页上看到的东西，就像包着li标签的ul一样，它只是说明“我里面包着的东西会有数据表单存在“,所谓数据表单就是各种输入框什么的了

action属性指定了“要将POST数据发送到哪个地址“

就像action="/test.php"这样，属性值就是一个地址，这说明了当用户点击button的时候就向这个地址发送POST数据

method属性说明了“数据的发送方式“

上面演示代码中使用了method="post",其实发送方式还有get

你试下改成get,然后点击button的时候网址也会跳转到http://localhost/test.php这个网址，但是test.php输出的POST数组是一个空数组

为什么？那就是因为咱们已经把方法改成了get,此时浏览器并没有发送POST数组，反而发送了GET数据，你看看网址上其实是http://localhost/test.php?age=18这样的了，刚学过GET参数不久，还记得吧？在网址上就是先加一个问号，然后就是参数名称=参数值来表达GET参数的

所以这个网址后面的?age=18自然就会构成GET参数咯，于是你在test.php里试下print_r($_GET);看看呗

form的method属性通常被指定get和post两个值表示两种表单数据发送方式，我们一般称为get方法和post方法，而其实还有delete和put两种方法，只是目前来说并不流行的样子，未来会在一种叫RESTful的设计风格中了解到它们，现在知道一下就好

发送数据需要一个submit按钮

上例代码中的<button type="submit">发送POST数据</button>这个button标签中，type="submit"这点很重要，如果是type="button"的话则点击后不会有任何事情的发生

type为submit时我们称这个按钮为submit按钮，也就是“提交按钮“,submit被点击时会导致form 将数据 发送到 action所指的地址

而其实submit按钮的表现形式并不仅限于button标签，还有input标签也可以，试试这样吧:

<form action="/test.php" method="post">
	<input name="age" type="text" placeholder="在此输入年龄，比如18"/>
	<input type="submit" value="点击发送数据“/>
</form>

这里第2个input的type就是submit,于是也显示了一个按钮，只是样子跟button有点儿不同，然而点击它之后的效果和type="submit"的button是一模一样的

当使用input来做submit按钮的时候，这个按钮上要显示的文字是通过value属性来定义的

然而我个人并不提倡使用input来搞submit按钮，首先样式不好看，其实button的也不能直接用，都是要定义样式的，可是如果用button的好处是可以跟type="button"这些button标签用统一的样式，因为大家都是button标签呀，CSS选择器好共享是不是？

而实际上我看到网上一些“比较正规的演示代码或者一些开源项目“都倾向使用button标签来写演示代码，使用input标签搞演示的都是比较简单的例子和老旧的代码了

表单控件的详解

我这里所谓的表单控件就是放在form标签里面的那些input,select等等，接下来详细说明一下常见的几种表单控件

  • 文本表单控件:input type=text

    就是<input type="text"/>这个，它是一个文本输入控件，我们可以在它上面输入各种文字字符，但只是一行而已

    如果直接按上面这样写在form里面，那触发submit后在PHP那里是收不到任何数据的，原因是我们没有给表单控件命名

    form里面可以包含很多不同的表单控件，我们要为每一个表单控件都起一个名字来区别它们谁是A,谁是B,不然大家都没名字怎么知道你是什么数据呢？

    给表单控件命名很简单，添加一个name属性就可以，之前的name="age"大家已经试过了，属性值就是我们要起的名字，但不要起得太奇葩，一般用英数字下划线起名字就好了

    比如我们写成<input type="text" name="name"/>,然后顺便输入点东西，比如一个姓名“小明“吧，提交给PHP那边后就会在POST数组里看到name这个键（我这章节都默认按POST方法发数据，请不要用GET来尝试）

  • 单选表单控件:input type=radio type=checkbox

    上代码:

    <form action="/index.php" method="post">
	告诉我你最爱的动物:
	<br/>
	<input type="radio" name="animal"/>猫
	<br/>
	<input type="radio" name="animal"/>狗
		
	<br/>
	<button type="submit">发送</button>
</form>

    这样提交后PHP输出的POST数组是:

    Array
(
	[animal] => on
)

    显示了有一个叫color的键，没错是对应了radio控件的name="animal",可是值是on这个是怎么回事呢？你再试试喔，无论你选猫还是选狗，它都是on

    其实这里还要为控件设置一个值，先把代码改成这样吧:

    <form action="/index.php" method="post">
	告诉我你最爱的动物:
	<br/>
	<input type="radio" name="animal" value="cat"/>猫
	<br/>
	<input type="radio" name="animal" value="dog"/>狗
		
	<br/>
	<button type="submit">发送</button>
</form>

    这里主要是在两个radio里加了value属性，猫的选项里，value的值是cat,狗的值是dog,这时候你选中猫，提交后PHP输出的color值是cat,反之就是dog了

    然而如果你再刷新页面，一个都不选就提交，那PHP就会输出一个空数组，表示没有收到POST数据，可以说因为既然用户不作出选择，表示他没有任何数据能传达给PHP吧

    这里加一个小插曲，注意radio的name必须相同，如果不同的话也不是不可以，但那算是另一组选项，比如这样:

    <form action="/index.php" method="post">
	告诉我你最爱的动物:
	<br/>
	<input type="radio" name="animal" value="cat"/>猫
	<br/>
	<input type="radio" name="animal" value="dog"/>狗
		
	<br/>
	<input type="radio" name="member" value="tortoise"/><span style="color:red;">乌龟</span>
		
	<br/>
	<button type="submit">发送</button>
</form>

    这个form表单中有3个选项:猫，狗和乌龟

    在猫和狗之间，你只能选中其中一个，但是如果你再选择乌龟，则猫和狗都不会被取消选择，这样就出现了同时选择2个的现象:

    简单地说就是只能选中相同name的其中一个radio

    详细地说，那就是猫和狗的input name值都叫“animal",但是乌龟的name值是“member",所有animal中只能选中其中1个，所以member不算是animal的其中一员，于是选择其它animal的时候，member不受影响，不会被取消选择

    可以说，猫和狗两个animal组成了一个分组，在这个分组里只选一个，而唯独乌龟的name值与其它不同，所以乌龟自己成了另一个分组

    接下来看看多分组的实际应用，大家以前使用各种网站或程序肯定遇到类似过这样有多分组radio的功能:

    <form action="/index.php" method="post">
	<p><input type="text" name="email" placeholder="您的邮箱“ /></p>
	<p><input type="password" name="password" placeholder="您的密码“></p>
	<p>
		性别:
		<span>
			<input type="radio" name="gender" value="male"/>男
		</span>
		<span style="margin-left:30px;">
			<input type="radio" name="gender" value="female"/>女
		</span>
	</p>
		
	<p>
		是否接受优惠推送:
		<span>
			<input type="radio" name="animal" value="yes"/>是
		</span>
		<span style="margin-left:30px;">
			<input type="radio" name="animal" value="no"/>否
		</span>
	</p>
	<button type="submit">注册</button>
</form>

    多分组就是这样用的，当我们有两种以上的选项都需要用户进行二选一的时候，这些选项各自分成一个个组就好了，一组是性别，一组是优惠推送设置