上节课主要讲解了PHP代码和HTML代码进行配合实现动态数据网页的方法。
这节课开始讲解前端网页如何和后端数据进行交互来实现更复杂的功能。
Form标签的概念和作用
上节课编写了一个学生分数查询一览页面，需要根据用户输入的条件信息，点击查询按钮后，返回显示不同的数据。
先来假设实现一个最简单的功能：假如在姓名检索条件文本输入框里面输入一个"a"字符串，则返回5条数据记录，假如在输入一个"b"字符串，则返回3条数据记录，其它情况则返回1条数据记录。
为了实现这个最简单的功能，需要用到Form标签。
Form标签元素称之为HTML表单，可以用于收集用户输入信息。
在3-4节里面已经介绍过：
一般使用form标签来包含各种输入标签元素，并用于提交给后台程序。
form标签内部可以使用不同类型的表单元素来输入不同类型的数据。
例如输入元素、复选元素、单选元素、下拉框选择元素、提交按钮等等。
例如这样：
<form>
<input type="text" name="studentname">
</form>
这样就是符合规范定义的，input等标签必须位于form开始和结束标签之内才能被提交给后端程序。
后端程序一般是通过定义form的action属性值来进行定义的。
例如：
<form action="studentlist.php">
<input type="text" name="studentname">
</form>
这个form在提交的时候，会提交给后端程序studentlist.php进行处理。
那么假如这段代码本身就位于studentlist.php内，就是自己提交给自己进行处理，这也是符合规范的。当然了，提交给另外一个文件也是符合规范的。
那么，按下一个按钮之后，通过何种代码方式来触发提交的动作呢？
有2种办法，一种是采用默认的<input type="submit" value="查询"/>，当点击这个按钮的时候，就会自动提交到form对应的action属性的php文件来进行处理。
另一种方法是采用JavaScript来进行提交。由于之前的网页代码编写中，查询按钮是通过a标签来实现了，因此这里我们就来试试看采用JavaScript方法如何提交给后台程序。
JavaScript方式提交Form
首先修改studentlist.php文件，增加form标签，同时修改查询按钮的a标签的onclick方法：
studentlist.php修改如下：
image
然后创建另外一个文件studentlist_do.php文件：
image
然后刷新网页：
4-7-3.jpg
在姓名输入框里面输入字符串a，然后点击查询按钮：
image
可以看到浏览器的地址变成了studentlist_do.php了，并且显示了刚刚输入的字符串a信息，说明后端程序studentlist_do.php已经接收到了用户输入的信息了。
根据以上示例，可以看到，通过在JavaScript代码中使用document.forms[0].submit();的方式可以提交到form对应的action程序。
而在action程序中，使用PHP系统全局变量
_POST["studentname"]就可以取得输入值。
text文本输入
重新在浏览器里面访问studentlist.php网页，然后在姓名文本输入框里面输入字符串b，点击查询按钮，可以看到如下结果：
image
也就是input的类型是text的时候，通过$_POST["控件name"]可以获取到用户输入的值。
接下来，试试看其它控件类型都是如何接收用户输入数据的。
注意重新打开浏览器网页的方式，最好是重新开一个Tab网页窗口，输入网页地址。这样可以避免一些浏览器缓存没有更新的问题。避免出现代码更新了但是浏览器网页显示却没有变化的情况发生。
radio单选按钮
性别是2个单选按钮，如果这2个input的type为radio类型的时候，假如name是一样的话，则用户只能点选其中的一个。
可以修改网页来试试看，在前面增加一个选项：全部。
studentlist.php修改如下：
image
studentlist_do.php修改如下：
4-7-7.jpg
刷新网页，点击单选按钮“男”：
image
然后点击单选按钮“女”：
4-7-9.jpg
可以看到只能选中一个。然后点击单选按钮“全部”：
image
可以看到只能选中一个。选中其中任意一个，就不能选中其它选项了。
来看看提交到后端程序是什么数值，点击查询按钮：
image
可以看到，接收数据是一个on。如果选择其它选项 ，同样接收数据也是on，这样就无法区分出选择了那个项目。
这是因为没有给每一个input设置value属性。
studentlist.php修改如下：
4-7-12.jpg
刷新网页，选择性别“男”，点击查询按钮：
image
可以看到接收到了输入的选项数据是"male"，表示单选项选择了“男”这个选项。
假如选择了选项“全部”后点击查查询按钮，那么接收到的数据就应该是"all"了。
checkbox多选按钮
来看看多选按钮接收到的数据是怎样的。
studentlist_do.php修改如下：
4-7-14.jpg
刷新网页，选择科目：语文和数学：
image
然后点击查询按钮：
image
可以看到，接收到的数据内容是：数学。
这不符合预期，由于checkbox是多选，所以可以有2种办法来获取每一个checkbox的值。
一个办法是给每一个checkbox设置不同的name，然后分别一个一个去获取每一个不同name的值。
另外一个办法，是给这组checkbox设置一样的name，但是在名称后面加上[]，这样PHP代码中获取的就是一个数组值。
studentlist.php修改如下：
4-7-17.jpg
studentlist_do.php修改如下：
image
刷新网页，选择科目：语文、数学和绘画，然后点击查询按钮：
4-7-19.jpg
可以看到每一个被选中的checkbox的值都获取到了。
select下拉框选择
再来看看下拉框选择项目是如何接收数据的。
studentlist_do.php修改如下：
image
刷新网页，选择分数段“75-90”：
image
然后点击查询按钮：
4-7-22.jpg
可以看到接收的数据就是对应的option的value的值。
接收不同类型参数的值，并返回不同的值
根据一览查询页面的功能要求，首次进入页面时，默认不显示任何查询数据，当点击了查询按钮之后，根据不同的查询条件，显示不同的数据，也就是说，点击查询按钮后，显示的网页和点击之前基本是同一个页面，如果做成2个php文件，则很不方便也不能重用页面代码，因此，可以将form的action属性修改为studentlist.php自己本身，这样就可以达到目的了。
将studentlist_do.php里面的代码剪切到studentlist.php里面的开始的位置，并修改action的值。
studentlist.php修改如下：
4-7-23.jpg
然后刷新网页，输入查询条件：
image
点击查询按钮：
4-7-25.jpg
可以看到网页显示了用户输入的数据值。
掌握了如何接收输入数据之后，可以开始编写真正的判断逻辑了。
考虑到页面上还会增加其它的功能，例如点击明细行进入其它页面，那么同样的一个action就需要判断是要执行哪种操作，就需要一个区分的标志，因此就需要在网页中增加一个隐藏的输入项目，通过设置这个隐藏项目的值为不同的值来告诉后端处理程序，要执行的是哪种操作。
在form中增加一个隐藏的输入项目使用如下方式：
<input type="hidden" name="fromtype" value=""/>
这个输入项目在浏览器中是看不到的项目，但是在$_POST变量里面是可以接收到它的value的。
在document.forms[0].submit();这句代码之前通过JavaScript来修改这个项目的value就可以达到设置不同的操作区分的目的了。
同时，将$alldatas变量的定义从后面移动到前面来，并修改为根据输入的姓名的值不同而返回不同的值。
studentlist.php修改如下：
image
image
作者：零基础学编程by学哥
链接：https://www.jianshu.com/p/b7a1f3fb5240
共同学习，写下你的评论
评论加载中...
作者其他优质文章
