form表单提交方式 form表单提交action不完整


上节课主要讲解了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=https://www.yf-zs.com/shuma/”查询”/>,当点击这个按钮的时候,就会自动提交到form对应的action属性的php文件来进行处理 。
另一种方法是采用JavaScript来进行提交 。由于之前的网页代码编写中,查询按钮是通过a标签来实现了,因此这里我们就来试试看采用JavaScript方法如何提交给后台程序 。
JavaScript方式提交Form
首先修改studentlist.php文件,增加form标签,同时修改查询按钮的a标签的onclick方法:
studentlist.php修改如下:

form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
form表单提交方式 form表单提交action不完整

文章插图
刷新网页,重复前面的查询条件进行查询,可以看到结果是一样的 。
require的功能就相当于是将对应的文件studentlist_do.php里面的内容全部搬到studentlist.php里面i 一样 。
通过这样的方式就能实现逻辑和显示的代码分离了 。
发现2个问题: