上一节介绍怎么在mac电脑上启用PHP程序,并且演示了一个简单的例子,这个例子运行时,涉及了浏览器、apache以及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文件,那么在点击提交按钮后,会看到这样的提示:

那么,发送的时机是什么?即浏览器在什么时候发送表单数据给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等变量的使用。


前后端开发(2):浏览器与PHP程序的交互的更多相关文章

  1. ABP开发框架前后端开发系列---(3)框架的分层和文件组织

    在前面随笔<ABP开发框架前后端开发系列---(2)框架的初步介绍>中,我介绍了ABP应用框架的项目组织情况,以及项目中领域层各个类代码组织,以便基于数据库应用的简化处理.本篇随笔进一步对 ...

  2. ABP开发框架前后端开发系列---(5)Web API调用类在Winform项目中的使用

    在前面几篇随笔介绍了我对ABP框架的改造,包括对ABP总体的介绍,以及对各个业务分层的简化,Web API 客户端封装层的设计,使得我们基于ABP框架的整体方案越来越清晰化, 也越来越接近实际的项目开 ...

  3. ABP开发框架前后端开发系列---(4)Web API调用类的封装和使用

    在前面随笔介绍ABP应用框架的项目组织情况,以及项目中领域层各个类代码组织,以及简化了ABP框架的各个层的内容,使得我们项目结构更加清晰.上篇随笔已经介绍了字典模块中应用服务层接口的实现情况,并且通过 ...

  4. ABP开发框架前后端开发系列---(8)ABP框架之Winform界面的开发过程

    在前面随笔介绍的<ABP开发框架前后端开发系列---(7)系统审计日志和登录日志的管理>里面,介绍了如何改进和完善审计日志和登录日志的应用服务端和Winform客户端,由于篇幅限制,没有进 ...

  5. ABP开发框架前后端开发系列---(12)配置模块的管理

    一般来说,一个系统或多或少都会涉及到一些系统参数或者用户信息的配置,而ABP框架也提供了一套配置信息的管理模块,ABP框架的配置信息,必须提前定义好配置的各项内容,然后才能在系统中初始化或者通过接口查 ...

  6. ABP开发框架前后端开发系列---(14)基于Winform的ABP快速开发框架

    前面介绍了很多ABP系列的文章,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机构.用户.角色.权限.菜单等内 ...

  7. ABP开发框架前后端开发系列---(16)ABP框架升级最新版本的经验总结

    有一小段时间没有持续升级ABP框架了,最近就因应客户的需要,把ABP框架进行全面的更新,由于我们应用的ABP框架,基础部分还是会使用官方的内容,因此升级的时候需要把官方基础ABP的DLL进行全面的更新 ...

  8. .net core webapi 前后端开发分离后的配置和部署

    背景:现在越来越多的企业都采用了在开发上前后端分离,前后端开发上的分离有很多种,那么今天,我来分享一下项目中得的前后端分离. B/S  Saas 项目:(这个项目可以理解成个人中心,当然不止这么点功能 ...

  9. ABP开发框架前后端开发系列---(2)框架的初步介绍

    在前面随笔<ABP开发框架前后端开发系列---(1)框架的总体介绍>大概介绍了这个ABP框架的主要特点,以及介绍了我对这框架的Web API应用优先的一些看法,本篇继续探讨ABP框架的初步 ...

  10. ABP开发框架前后端开发系列---(10)Web API调用类的简化处理

    在较早期的随笔<ABP开发框架前后端开发系列---(5)Web API调用类在Winform项目中的使用>已经介绍了Web API调用类的封装处理,虽然这些调用类我们可以使用代码生成工具快 ...

随机推荐

  1. 在.net core自带DI中服务生命周期 Transient,Scoped,Singleton

    只要是透过WebHost产生实例的类型,都可以在构造方法注入.所以Controller.View.Filter.Middleware或自定义的Service等都可以被注入. Transient是瞬时的 ...

  2. WPF 3D编程介绍

    原文:WPF 3D编程介绍 上一篇文章简单的介绍了WPF编程的相关的内容,也推荐了本书.今天要来讲一下在WPF如何开展3D编程. 使用的xmal 和C#开发的时候:需要使用如下的关键要素: 1:摄像机 ...

  3. A Byte of Python(简明Python教程) for Python 3.0 下载

    A Byte of Python v1.92 (for Python 3.0) 官方下载地址,当前(20120730)  最新版本 1.92 基于Python3的 下载: http://files.s ...

  4. WPF 画线动画效果实现

    原文:WPF 画线动画效果实现 弄了将近三天才搞定的,真是艰辛的实现. 看了很多博客,都太高深了,而且想要实现的功能都太强大了,结果基础部分一直实现不了,郁闷啊~ 千辛万苦终于找到了一个Demo,打开 ...

  5. Bootstrap按钮组 按钮工具栏 嵌套

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  6. jquery map()的用法--遍历数组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. MVC CRUD 的两种方法

    //Index.cshtml @model IQueryable<MvcExam2.Models.Product>@{    Layout = null;}<!DOCTYPE htm ...

  8. WPF 控件 深度克隆

    原文:WPF 控件 深度克隆 http://social.msdn.microsoft.com/Forums/zh-SG/wpfzhchs/thread/e5c87129-966a-4d51-a934 ...

  9. win10 uwp ApplicationView

    原文:win10 uwp ApplicationView 本文和大家介绍一个重要的类,他可以用来设置窗口,如设置启动大小,设置是否允许截图,是否进入全屏,所有和窗口有关的,都可以在他这里设置. 可以使 ...

  10. QDialog之屏蔽Esc键(简单深刻,要么重写keyPressEvent然后break忽略此事件,要么重写eventFilter然后return,都是为了忽略此事件)

    简述 Qt中Esc键会在一些控件中默认的进行一些事件的触发,比如:QDialog,按下Esc键窗口消失.大多数情况下,我们不需要这么做,那么就需要对默认事件进行屏蔽. 简述 源码分析 事件过滤器 事件 ...