第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所示。

在PHP与Web交互时，最常用的就是GET和POST两种方式。

7.1.2　Web工作原理

遵循HTTP，就可以向服务器发送请求，并接收消息。这中间又经历了哪些过程呢？ Web工作原理可以简化为8个步骤，如图7.2所示。

下面就详细介绍每一个步骤。

（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文件，此时，用户在浏览器中就看到访问的网站内容。

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中，左侧是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所示。

（2）编写HTML代码。

创建完成后，编辑器默认生成了基本的HTML5代码结构。在＜body＞和＜/body＞标签内编写HTML代码，具体代码如下：

（3）查看运行结果如图7.6所示。

7.2.2　HTML表单

为了实现浏览器和服务器的互动，可以使用HTML表单搜集不同类型的用户输入，将输入的内容从客户端的浏览器传送到服务器端，经过服务器上的PHP程序进行处理后，再将用户所需要的信息传递回客户端的浏览器上，从而获得用户信息，使PHP与Web实现交互。HTML表单形式很多，如用户注册、登录、发布文章等页面。

在HTML中，使用＜form＞元素，即可创建一个表单。表单结构如下：

＜form＞元素的属性如表7.2所示。

7.2.3　表单元素

表单（form）由表单元素组成。常用的表单元素有以下几种：输入域元素＜input＞、选择域元素＜select＞和＜option＞、文字域元素＜textarea＞等。

1．输入域元素＜input＞

输入域元素＜input＞是表单中最常用的元素之一。常用的文本框、按钮、单选按钮、复选框等构成了一个完整的表单。

语法格式如下：

参数name是指输入域的名称，参数type是指输入域的类型。在＜input type=““＞元素中一共提供了10种类型的输入区域，用户所选择使用的类型由type属性决定。type属性取值及举例如表7.3所示。

2．选择域元素＜select＞和＜option＞

通过选择域元素＜select＞和＜option＞可以建立一个列表或者菜单。菜单的使用是为了节省空间，正常状态下只能看到一个选项，单击右侧的倒三角按钮，打开菜单后才能看到全部的选项。列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。

语法格式如下：

其中参数name表示选择域的名称；参数size表示列表的行数；参数value表示菜单选项值；参数multiple表示以列表方式显示数据，省略则以菜单方式显示数据。

选择域元素＜select＞和＜option＞的显示方式及举例如表7.4所示。

3．文字域元素＜textarea＞

文字域元素＜textarea＞用来制作多行的文字域，可以在其中输入更多的文本。语法格式如下：

其中参数name表示文字域的名称；rows表示文字域的行数；cols表示文字域的列数（这里的rows和cols以字符为单位）；value表示文字域的默认值，warp用于设定显示和送出时的换行方式，值为off表示不自动换行，值为hard表示自动硬回车换行，换行标记一同被发送到服务器，输出时也会换行，值为soft表示自动软回车换行，换行标记不会被发送到服务器，输出时仍然为一列。

文字域元素＜textarea＞的值及举例如表7.5所示。

7.3　CSS美化表单页面

7.3.1　CSS简介

CSS（Cascading Style Sheets，层叠样式表），是一种标记语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。运用CSS样式可以让页面变得美观，就像化妆前和化妆后的效果一样，如图7.7所示。

7.3.2　插入CSS

在HTML文件中插入CSS有3种方式。

1．行内样式表

行内样式表就是使用HTML属性style，在style属性内添加CSS。具体代码如下：

运行结果如图7.8所示。

2．内部样式表

内部样式表即在HTML文件内使用＜style＞元素，在文档头部＜head＞元素内定义内部样式表，具体代码如下：

运行结果与图7.8相同。

3．外部样式表

外部样式表是一个扩展名为．css的文本文件。跟其他文件一样，我们可以把样式表文件放在Web服务器上或者本地硬盘上。例如，在test文件目录下有两个文件index.html和css文件夹。创建一个CSS文件，命名为default.css，存放于css文件夹中。目录结构如图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.4　JavaScript表单验证

7.4.1　JavaScript简介

通常，我们所说的前端就是指HTML、CSS和JavaScript 3项技术，它们的作用分别如下。

HTML：定义了网页的内容。

CSS：描述了网页的布局。

JavaScript：描述了网页的行为。

JavaScript是一种可以嵌入在HTML代码中由客户端浏览器运行的脚本语言。在网页中使用JavaScript代码，不仅可以实现网页特效，还可以响应用户请求实现动态交互的功能。例如，在用户注册页面中，需要对用户输入信息的合法性进行验证，包括是否填写了“邮箱”和“手机号”，填写的“邮箱”和“手机号”格式是否正确等。JavaScript验证邮箱是否为空的效果如图7.11所示。

7.4.2　调用JavaScript

1．在HTML中嵌入JavaScript脚本

JavaScript作为一种脚本语言，可以使用＜script＞元素嵌入到HTML文件中。

语法格式如下：

例如，在HTML文件中嵌入JavaScript脚本。这里直接在＜script＞和＜/script＞标签中间写入JavaScript代码，用于弹出一个提示对话框，代码如下：

在上面的代码中，＜script＞与＜/script＞标签之间调用JavaScript脚本语言window对象的alert方法，向客户端浏览器弹出一个提示对话框。运行结果如图7.12所示。

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.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.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.5.2　获取GET方式提交的表单数据

GET方式是＜form＞元素中method属性的默认方法。使用GET方式提交的表单数据被附加到URL后，作为URL的一部分发送到服务器端。在程序的开发过程中，由于GET方式提交的数据是附加到URL上发送的，因此，在URL的地址栏中将会显示“URL+用户传递的参数”。

GET方式的传参格式如图7.17所示。

其中，url为表单响应地址（如localhost/index. php），name1为表单元素的名称，value1为表单元素的值。url和表单元素之间用“?”隔开，而多个表单元素之间用“&”隔开，每个表单元素的格式都是name=value，固定不变。

【例7.04】　创建一个表单来实现应用GET方式提交用户名和密码，并显示在URL地址栏中。添加一个文本框，命名为user，添加一个密码域，命名为pwd，将表单的method属性设置为GET方式，代码如下：（实例位置：资源包\源码\07\7.04）

运行本实例，在文本框中输入用户名“明日科技”和密码mrsoft，单击“提交”按钮，文本框内的信息就会显示在URL地址栏中，如图7.18所示。

显而易见，这种方法会将参数暴露。如果用户传递的参数是非保密性的参数（如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.7.2　输出用户填写的登录信息

实例位置：资源包\源码\07\实战\02

创建一个用户登录页面login.html，使用POST方式提交到checkLogin.php，在checkLogin.php文件中，输出填写的登录信息，如图7.20所示。

7.7.3　输出明日学院用户id

实例位置：资源包\源码\07\实战\03

在明日学院网站的用户列表中，用户单击“编辑”按钮，浏览器将使用GET方式发送请求，并且传递用户id到editUser.php文件。在editUser.php文件中，输出用户id，如图7.21所示。试着实现该功能。