前后端开发（2）：浏览器与PHP程序的交互

前后端开发（2）：浏览器与PHP程序的交互

上一节介绍怎么在mac电脑上启用PHP程序，并且演示了一个简单的例子，这个例子运行时，涉及了浏览器、apache以及PHP程序的交互，这三者的关系大概是这样的：
PHP程序的位置

一般来说，浏览器（或者类似功能的程序）给apache（或者其它服务器）发送的数据称作“表单”，表单就相当一个“界面”，小程觉得从“界面”入手去理解交互的流程是一个可行的办法。

本文介绍如何提交一个表单，以及引发的相应交互。 那么，在浏览器上点击一个“按钮”，会引发什么样的交互行为呢？

（一）交互一，浏览器给apache发送数据

浏览器以表单的形式给apache发送数据。

表单的标签是：

，比如下面一个html页面，留意里面
标签的内容：

 

<html>
<meta charset="utf-8">
<body>
<form action="login.php" method="post">
昵称：<input type="text" name="name">
口号：<input type="text" name="slogan">
<input type="submit" value="提交">
</form>
</body>
</html>

html页面（相当于整体的界面），包括中的内容，由浏览器来解析。比如上面的这个html页面，解析后的样子是这样的：
一个简单的表单界面

可以看到，有两个文本输入框，还有一个提交按钮。

如果浏览器只做解析显示的工作，那就没有apache跟PHP程序什么事情了。实际上，浏览器经常要把数据发送给apache，而发送的数据就是标签（即表单）的数据。

表单数据，可以在标签中找到，其中可以包括按钮、下拉菜单、文本输入框等等元素。比如上面那个表单：
表单中的元素

注意，上面的表单，还把PHP代码文件发给了apache，如果项目目录（默认是/Library/WebServer/Documents）下面没有这个php文件，那么在点击提交按钮后，会看到这样的提示：
找不到php文件

那么，发送的时机是什么？即浏览器在什么时候发送表单数据给apache？

在点击“submit”类型的按钮的时候触发发送。如果没有submit按钮，则需要通过js主动触发表单的submit事件。

另外，在发送的method上，区分为get与post方式。

get方法，表单的所有信息都出现在请求的url中（在地址栏上可以看到），对于长度也有限制。比如，这样的get请求：

http://localhost/formtest.html?name=abc&slogan=hello+world

其中name与slogan是键（key），而abc与hello world是对应的值（value），表单的数据就是键值对的集合。

post方法，请求时不会显示表单的任何数据，对于长度限制也很弱。

（二）交互二，PHP代码访问表单的内容

表单中可以指定把项目目录中的php文件的内容（或者当前的脚本--比如既有表单又有php代码）提交给apache。apache在拿到php代码后，会交由PHP程序来处理，而这些php代码很可能需要访问表单的内容，比如login.php代码中，需要访问表单中的文本框的内容，那如何访问呢？

表单的内容（键值对的集合），会保存在$_GET变量（get方法时）或$_POST变量（post方法时）中，这个在apache调用PHP程序时就初始化好。

所以，PHP代码可以通过访问$_GET或$_POST变量来访问表单的内容。

比如，login.php的代码可以这样写：

<meta charset="utf-8">
你好，<?php echo $_GET["name"]; ?>! <br>
你的口号是：<?php echo $_GET["slogan"];?> !

再次提交这个表单时，在浏览器上可以看到这样的提示：
访问表单内容后的输出

明显，还要区分是用$_GET还是$_POST是麻烦的，这时，可以使用$_REQUEST变量来访问，$_REQUEST对于get或post方式都适用。

应该留意到，PHP程序解析出结果后，把结果返回给apache，apache返回html页面给浏览器，最终浏览器显示结果。

总结一下，本文从一个简单表单请求的例子入手，介绍了表单的概念，以及请求过程中涉及到的两个重要的交互，并引出了_REQUEST等变量的使用。

 

posted @ 2019-07-01 14:49  寒未爱  阅读(357)  评论(0)  编辑  收藏  举报