美文网首页程序员Android开发
前后端开发(2):浏览器与PHP程序的交互

前后端开发(2):浏览器与PHP程序的交互

作者: 广州小程 | 来源:发表于2019-07-01 14:34 被阅读3次

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


PHP程序的位置

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

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

(一)交互一,浏览器给apache发送数据

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

表单的标签是:<form></form>,比如下面一个html页面,留意里面<form>标签的内容:

<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页面(相当于整体的界面),包括<form>中的内容,由浏览器来解析。比如上面的这个html页面,解析后的样子是这样的:


一个简单的表单界面

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

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

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


表单中的元素

注意,上面的表单,还把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等变量的使用。


slogan

相关文章

  • 前后端开发(2):浏览器与PHP程序的交互

    上一节介绍怎么在mac电脑上启用PHP程序,并且演示了一个简单的例子,这个例子运行时,涉及了浏览器、apache以...

  • 小程序与后端联调踩坑

    小程序与后端联调踩坑 本次练习是以springboot作为后端开发框架、微信小程序做前端交互。 后端代码截图: s...

  • HTTP协议、存储、Ajax

    前后端数据交互与 HTTP 协议 1、前后端通信是什么(1)前端和后端交互的过程(2)浏览器和服务器之间数据交互的...

  • 前端是个什么鬼?

    前端是做什么的? 开发工程师负责程序研发环节,分为前端和后端 前端负责产品界面展现与用户交互功能 后端负责数据与接...

  • WEB开发中前后端分离的好处与区别

    什么是前后端分离 程序开发的时候,前后端开发以数据为交互导向的开发方式,同时也是一种架构方式。 前后端分离的好处 ...

  • 微信小程序开发——JAVA后端解析小程序json数组对象

    在用JAVA与小程序联合开发项目能很好的进行前后端开发, 小程序端负责页面的逻辑,交互以及跳转等, JAVA后台负...

  • 2019-01-16

    多用型后台管理系统,目前采用原生JS+原生的PHP来进行开发,前端与后端的数据交互采用axios库来进行,目前没有...

  • 小程序云开发学习笔记

    云开发与 Serverless 什么是小程序云开发 传统的小程序开发:前端+后端(各种后端,运维的问题) 云开发模...

  • 2022年都在用哪些Node.js ORM框架?

    如果没有接触过 Node.js 或其他后端开发语言开发的与数据库交互的应用程序,可能对这个 ORM 框架有点迷糊,...

  • json-server模拟服务端REST接口

    在web项目开发中,前端完成静态页面的开发后,后端迟迟未给到接口,会导致前、后端数据交互的开发流程中停滞。可以根据...

网友评论

    本文标题:前后端开发(2):浏览器与PHP程序的交互

    本文链接:https://www.haomeiwen.com/subject/sspgcctx.html