第7章 PHP与Web交互
（
视频讲解：1小时40分钟）
PHP与Web页面交互是学习PHP语言编程的基础。在PHP中提供了两种与Web页面交互的方法，一种是通过Web表单提交数据，另一种是通过URL参数传递。本章将详细讲解PHP与Web页面交互的相关知识，为以后学习PHP语言编程做好铺垫。
学习摘要：
Web工作原理
HTML表单
CSS美化表单页面
JavaScript表单验证
PHP获取表单数据
7.1 Web工作原理
视频讲解
当用户浏览网页时，会打开浏览器，输入网址后按Enter键，然后浏览器中就会显示出想要浏览的内容。在这个看似简单的用户行为背后，到底隐藏了些什么呢？
7.1.1 HTTP协议
超文本传输协议（HyperText Transfer Protocol，HTTP）是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
HTTP是一个客户端和服务器端请求和应答的标准（TCP）。客户端指的是终端用户，服务器端指的是服务器上的网站。通过使用Web浏览器、网络爬虫或者其他的工具，客户端发起一个到服务器上指定端口（默认端口为80）的HTTP请求，基本原理如图7.1所示。
图7.1 HTTP基本原理
在客户端向服务器端发起请求时，常用的请求方法如表7.1所示。
表7.1 HTTP的常用请求方法
在PHP与Web交互时，最常用的就是GET和POST两种方式。
7.1.2 Web工作原理
遵循HTTP，就可以向服务器发送请求，并接收消息。这中间又经历了哪些过程呢？ Web工作原理可以简化为8个步骤，如图7.2所示。
图7.2 Web工作原理图
下面就详细介绍每一个步骤。
（1）用户在浏览器中输入网址，如www.mingrisoft.com，浏览器会去请求DNS服务器，DNS（Domain Name System）是“域名系统”的英文缩写，是一种组织成域层次结构的计算机和网络服务命名系统，它用于TCP/IP网络，它从事将主机名或域名转换为实际IP地址的工作。DNS就是这样的一位“翻译官”，将www.mingrisoft.com翻译成IP地址101.201.120.85。
（2）DNS服务器将翻译过来的IP地址101.201.120.85传递给浏览器。
（3）浏览器通过IP地址找到IP对应的Web服务器（通常是Apache或者Nginx），建立TCP连接，向服务器发送HTTP Request（请求）包。
（4）Web服务器发现用户访问了后缀为php的文件，如index.php文件，那么服务器就会访问PHP解析引擎。
（5）PHP在解析时，发现需要使用数据库。于是，连接数据库，访问数据库服务器（可能是MySQL、SQL Server、Oracle等）。
（6）数据库根据查询条件查找数据，并将数据返回给PHP解析引擎。
（7）PHP解析引擎拼接数据，解析成HTML，返回给Web服务器。
（8）Web服务器将HTML文件返回给浏览器，浏览器开始解析HTML文件，此时，用户在浏览器中就看到访问的网站内容。
注意
步骤（5）中的数据库内容将在第8章讲解，步骤（7）和步骤（8）中HTML内容会在接下来的7.2节中讲解。
7.2 HTML表单
视频讲解
7.2.1 HTML简介
HTML是用来描述网页的一种语言。HTML指的是超文本标记语言（Hyper Text Markup Language），它不是一种编程语言，而是一种标记语言。标记语言是一套标记标签，这种标记标签通常被称为HTML标签，它们是由尖括号包围的关键词，如＜html＞。HTML标签通常是成对出现的，如＜h1＞和＜/h1＞。标签对中的第一个标签是开始标签，第二个标签是结束标签。Web浏览器的作用是读取HTML文档，并以网页的形式显示出它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容，如图7.3所示。
图7.3 显示页面内容
在图7.3中，左侧是HTML代码，右侧是显示的页面内容。HTML代码中，第一行的＜!DOCTYPE html＞表示使用的是HTML5（最新HTML版本），其余的标签都是成对出现，并且在右侧的页面中，只显示标签中的内容，不显示标签。
那么，该如何创建一个HTML文件呢？当然，可以先创建一个文本文档，然后将后缀名．txt格式更改为．html。但是．txt文件默认编码格式为ANSI，而PHP编码规范要求使用UTF-8，这就需要更改文件编码格式。下面介绍如何使用PhpStorm创建HTML文件。
创建一个HTML文件，将其命名为index.html。在index.html文件中，编写HTML代码。具体步骤如下。
（1）使用PhpStorm创建index. html文件。
在D:\phpstudy\WWW路径下创建Code文件夹，打开PhpStorm，选择Code文件夹。在Code文件下创建index.html文件，步骤如图7.4和图7.5所示。
图7.4 创建HTML文件
图7.5 命名为index.html
（2）编写HTML代码。
创建完成后，编辑器默认生成了基本的HTML5代码结构。在＜body＞和＜/body＞标签内编写HTML代码，具体代码如下：
（3）查看运行结果如图7.6所示。
图7.6 index.html运行结果
注意
index.html是HTML文件，不是PHP文件，Web工作原理中只涉及了步骤（1）、（2）、（3）、（8）。
说明
由于HTML内容广泛，本章不可能全部涵盖，作为PHP初学者，只要求掌握基本的HTML内容。
7.2.2 HTML表单
为了实现浏览器和服务器的互动，可以使用HTML表单搜集不同类型的用户输入，将输入的内容从客户端的浏览器传送到服务器端，经过服务器上的PHP程序进行处理后，再将用户所需要的信息传递回客户端的浏览器上，从而获得用户信息，使PHP与Web实现交互。HTML表单形式很多，如用户注册、登录、发布文章等页面。
在HTML中，使用＜form＞元素，即可创建一个表单。表单结构如下：
＜form＞元素的属性如表7.2所示。
表7.2 ＜form＞元素的属性
说明
GET方法是将表单内容附加在URL地址后面发送；POST方式是将表单中的信息作为一个数据块发送到服务器上的处理程序中，在浏览器的地址栏不显示提交的信息。method属性默认方法为GET方法。
7.2.3 表单元素
表单（form）由表单元素组成。常用的表单元素有以下几种：输入域元素＜input＞、选择域元素＜select＞和＜option＞、文字域元素＜textarea＞等。
1．输入域元素＜input＞
输入域元素＜input＞是表单中最常用的元素之一。常用的文本框、按钮、单选按钮、复选框等构成了一个完整的表单。
语法格式如下：
参数name是指输入域的名称，参数type是指输入域的类型。在＜input type=““＞元素中一共提供了10种类型的输入区域，用户所选择使用的类型由type属性决定。type属性取值及举例如表7.3所示。
表7.3 type属性取值及举例
2．选择域元素＜select＞和＜option＞
通过选择域元素＜select＞和＜option＞可以建立一个列表或者菜单。菜单的使用是为了节省空间，正常状态下只能看到一个选项，单击右侧的倒三角按钮，打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。
语法格式如下：
其中参数name表示选择域的名称；参数size表示列表的行数；参数value表示菜单选项值；参数multiple表示以列表方式显示数据，省略则以菜单方式显示数据。
选择域元素＜select＞和＜option＞的显示方式及举例如表7.4所示。
表7.4 选择域元素＜select＞和＜option＞的显示方式及举例
说明
在上面的表格中给出了静态菜单项的添加方法，而在Web程序开发过程中，也可以通过循环语句动态添加菜单项。
3．文字域元素＜textarea＞
文字域元素＜textarea＞用来制作多行的文字域，可以在其中输入更多的文本。语法格式如下：
其中参数name表示文字域的名称；rows表示文字域的行数；cols表示文字域的列数（这里的rows和cols以字符为单位）；value表示文字域的默认值，warp用于设定显示和送出时的换行方式，值为off表示不自动换行，值为hard表示自动硬回车换行，换行标记一同被发送到服务器，输出时也会换行，值为soft表示自动软回车换行，换行标记不会被发送到服务器，输出时仍然为一列。
文字域元素＜textarea＞的值及举例如表7.5所示。
表7.5 文字域元素＜textarea＞的值及举例
7.3 CSS美化表单页面
视频讲解
7.3.1 CSS简介
CSS（Cascading Style Sheets，层叠样式表），是一种标记语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。运用CSS样式可以让页面变得美观，就像化妆前和化妆后的效果一样，如图7.7所示。
图7.7 使用CSS前后效果对比
说明
更多CSS知识，请查阅相关教程。作为PHP初学者，只要求掌握基本的CSS知识。
7.3.2 插入CSS
在HTML文件中插入CSS有3种方式。
1．行内样式表
行内样式表就是使用HTML属性style，在style属性内添加CSS。具体代码如下：
运行结果如图7.8所示。
图7.8 新增行内样式表效果
2．内部样式表
内部样式表即在HTML文件内使用＜style＞元素，在文档头部＜head＞元素内定义内部样式表，具体代码如下：
运行结果与图7.8相同。
3．外部样式表
外部样式表是一个扩展名为．css的文本文件。跟其他文件一样，我们可以把样式表文件放在Web服务器上或者本地硬盘上。例如，在test文件目录下有两个文件index.html和css文件夹。创建一个CSS文件，命名为default.css，存放于css文件夹中。目录结构如图7.9所示。
图7.9 目录结构
那么，如何在一个index.html文档中引用一个外部样式表文件（default.css）呢？答案是：在index. html中创建一个指向外部样式表文件的链接（link）即可，语法格式如下：
首先，编写default.css文件代码，即把原index.html内部的CSS代码单独写入default.css文件中，default.css文件具体代码如下：
然后，在index.html文件中使用＜link＞标签引入default.css外部CSS文件。注意，要在href属性中给出样式表文件的地址。这行代码必须被插入HTML代码的头部（header），即放在标签＜head＞和标签＜/head＞之间。index.html文件完整代码如下：
运行结果如图7.8所示。
7.3.3 使用CSS美化表单页面
应用HTML表单，并使用CSS美化表单，创建一个模拟京东的商城注册页面。
【例7.01】 创建一个HTML文件，命名为register.html，该页面中包含一个注册表单。表单包含“邮箱”“密码”“确认密码”“手机号”和“是否同意服务协议”。在register.html文件中，使用＜link＞标签引入2个外部样式表文件basic.css和login.css。代码如下：（实例位置：资源包\源码\07\7.01）
运行结果如图7.10所示。
图7.10 商城注册页面效果
7.4 JavaScript表单验证
视频讲解
7.4.1 JavaScript简介
通常，我们所说的前端就是指HTML、CSS和JavaScript 3项技术，它们的作用分别如下。
HTML：定义了网页的内容。
CSS：描述了网页的布局。
JavaScript：描述了网页的行为。
JavaScript是一种可以嵌入在HTML代码中由客户端浏览器运行的脚本语言。在网页中使用JavaScript代码，不仅可以实现网页特效，还可以响应用户请求实现动态交互的功能。例如，在用户注册页面中，需要对用户输入信息的合法性进行验证，包括是否填写了“邮箱”和“手机号”，填写的“邮箱”和“手机号”格式是否正确等。JavaScript验证邮箱是否为空的效果如图7.11所示。
图7.11 JavaScript验证为空
注意
由于JavaScript是客户端编程语言，根据用户使用的浏览器不同，JavaScript的提示框出现的位置可能不同。本书所有实例均使用谷歌浏览器运行。
7.4.2 调用JavaScript
1．在HTML中嵌入JavaScript脚本
JavaScript作为一种脚本语言，可以使用＜script＞元素嵌入到HTML文件中。
语法格式如下：
例如，在HTML文件中嵌入JavaScript脚本。这里直接在＜script＞和＜/script＞标签中间写入JavaScript代码，用于弹出一个提示对话框，代码如下：
在上面的代码中，＜script＞与＜/script＞标签之间调用JavaScript脚本语言window对象的alert方法，向客户端浏览器弹出一个提示对话框。运行结果如图7.12所示。
图7.12 在HTML中嵌入JavaScript脚本
2．应用JavaScript事件调用自定义函数
在Web程序开发过程中，经常需要在表单元素相应的事件下调用自定义函数。例如，在按钮的单击事件下调用自定义函数check（）来验证表单元素是否为空，代码如下：
然后在该表单的当前页中编写一个check（）自定义函数，在该函数内实现验证是否为空。
3．引用外部JavaScript文件
在网页中，除了可以在＜script＞与＜/script＞标签之间编写JavaScript脚本代码，还可以通过＜script＞元素中的src属性指定外部的JavaScript文件（即JS文件，以．js为扩展名）的路径，从而引用对应的JS文件。该方式与引用外部CSS文件类似。
语法格式如下：
其中，url是JS文件的路径。使用外部JS文件的优点如下：
使用JS文件可以将JavaScript脚本代码从网页中独立出来，便于代码的阅读。
一个外部JS文件，可以同时被多个页面调用。当共用的JavaScript脚本代码需要修改时，只需要修改JS文件中的代码即可，便于代码的维护。
通过＜script＞元素中的src属性不但可以调用同一个服务器上的JS文件，还可以通过指定路径来调用其他服务器上的JS文件。
7.4.3 JavaScript表单验证
应用JavaScript事件调用自定义函数，检测商城注册页面的输入信息。
【例7.02】 使用例7.01中的代码，在register.html文件中添加JavaScript验证的代码。首先给register.html页面中的“注册”按钮添加onclick单击事件，调用自定义函数mr_verify（）。然后，在函数体内实现表单验证功能。代码如下：（实例位置：资源包\源码\07\7.02）
当输入错误的手机号格式，运行结果如图7.13所示。注册成功如图7.14所示。
图7.13 手机号格式错误提示
图7.14 注册成功提示
7.5 PHP获取表单数据
视频讲解
HTML表单已经准备就绪，接下来就要提交表单，并且获取表单数据。提交表单，即是将表单信息从客户端提交到服务器端，这时需要使用HTTP的请求方法，本节中只讲解最常用的POST方法和GET方法，采用哪种方法是由HTML文件中＜form＞元素的method属性所指定的。服务器接收请求信息，这时服务器端语言PHP闪亮登场。
PHP接收数据的方式非常简单，如果客户端使用POST方式提交，提交的表单域代码如下：
上述代码中，使用$_POST［'username'］接收＜input＞元素中name属性为username的值，$_ POST［'username'］的值为“张三”。
如果以GET方式提交，则使用$_GET［'username'］接收，如图7.15所示。
图7.15 PHP获取表单数据
7.5.1 获取POST方式提交的表单数据
应用POST方式时，只需将＜form＞元素中的属性method设置成POST即可。POST方式不依赖于URL，不会显示在地址栏。POST方式可以没有限制地传递数据到服务器，所有提交的信息在后台传输，用户在浏览器端是看不到这一过程的，安全性高。所以POST方式比较适合用于发送保密的（如账号密码）或者容量较大的数据到服务器。
【例7.03】 获取商城注册页面的输入信息。（实例位置：资源包\源码\07\7.03）
在例7.02商城注册页面中，使用POST方式将表单数据提交到addUser.php文件中，在该文件中接收表单数据并显示数据内容。具体步骤如下。
（1）修改register.html文件，使用POST方式提交表单数据，主要代码如下：
（2）创建addUser.php文件，接收表单数据，完整代码如下：
在浏览器中输入http://localhost/Code/SL/07/03/register.html，按Enter键，进入商城注册页面，在表单中输入相应信息，单击“注册”按钮，输出用户注册信息。
操作过程如图7.16所示。
图7.16 获取POST方式提交的表单数据
7.5.2 获取GET方式提交的表单数据
GET方式是＜form＞元素中method属性的默认方法。使用GET方式提交的表单数据被附加到URL后，作为URL的一部分发送到服务器端。在程序的开发过程中，由于GET方式提交的数据是附加到URL上发送的，因此，在URL的地址栏中将会显示“URL+用户传递的参数”。
GET方式的传参格式如图7.17所示。
图7.17 URL接收GET参数示意图
其中，url为表单响应地址（如localhost/index. php），name1为表单元素的名称，value1为表单元素的值。url和表单元素之间用“?”隔开，而多个表单元素之间用“&”隔开，每个表单元素的格式都是name=value，固定不变。
注意
若要使用GET方式发送表单，URL的长度应限制在1MB字符以内。如果发送的数据量太大，数据将被截断，从而导致意外或失败的处理结果。
【例7.04】 创建一个表单来实现应用GET方式提交用户名和密码，并显示在URL地址栏中。添加一个文本框，命名为user，添加一个密码域，命名为pwd，将表单的method属性设置为GET方式，代码如下：（实例位置：资源包\源码\07\7.04）
多学两招
上述代码中，使用了Bootstrap前端UI框架。Bootstrap，来自Twitter公司，是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript开发的，它简洁灵活，使得Web开发更加快捷。中文网址为http://www.bootcss.com。
运行本实例，在文本框中输入用户名“明日科技”和密码mrsoft，单击“提交”按钮，文本框内的信息就会显示在URL地址栏中，如图7.18所示。
图7.18 使用GET方式提交表单
显而易见，这种方法会将参数暴露。如果用户传递的参数是非保密性的参数（如id=8），那么采用GET方式传递数据是可行的，如果用户传递的是保密性的参数（如密码），这种方法就会不安全。而使用POST方式则更为安全。
7.6 小结
本章内容涉及知识比较广泛，既有前端HTML、CSS和JavaScript技术，又有后端PHP使用两种方式接收表单数据的知识。相信读者在学习完本章后，可以对表单应用自如，从而轻松实现“人机交互”。掌握了本章的技术要点，就意味着已经有了开发动态网页的能力，为下一步的深入学习奠定了良好的基础。
7.7 实战
7.7.1 输出用户填写的信息
实例位置：资源包\源码\07\实战\01
创建一个填写个人信息的页面user.html，使用POST方式提交到update.php，在update.php文件中，输出用户填写的信息，如图7.19所示。
图7.19 POST方式提交用户信息
7.7.2 输出用户填写的登录信息
实例位置：资源包\源码\07\实战\02
创建一个用户登录页面login.html，使用POST方式提交到checkLogin.php，在checkLogin.php文件中，输出填写的登录信息，如图7.20所示。
图7.20 POST方式提交用户登录信息
7.7.3 输出明日学院用户id
实例位置：资源包\源码\07\实战\03
在明日学院网站的用户列表中，用户单击“编辑”按钮，浏览器将使用GET方式发送请求，并且传递用户id到editUser.php文件。在editUser.php文件中，输出用户id，如图7.21所示。试着实现该功能。
图7.21 GET方式接收用户id