11 Web交互知识你了解吗?

本文涉及的产品
云数据库 Tair(兼容Redis),内存型 2GB
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
简介: 路老师带你深入PHP世界,纯干货分享。本文从Web工作原理讲起,介绍了HTTP协议和Web数据处理流程,重点讲解了PHP如何获取表单数据,包括POST和GET方法的具体实现及示例代码。适合初学者入门,助你掌握PHP核心技术。

有胆量你就来跟着路老师卷起来! -- 纯干货,技术知识分享

路老师给大家分享PHP语言的知识了,旨在想让大家入门PHP,并深入了解PHP语言。

image.gif 编辑


1 Web工作原理

当您浏览网页的时候,会打开浏览器,输入网址后按下回车键,然后浏览器就会显示出你想要的结果,在看似简单的行为背后,到底隐藏了什么逻辑呢?

1.1 HTTP协议

超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。所有的WWW文件都必须遵循这个标准。设计HTTP最初的目的是为了提供一种发布和接受HTML页面的方法。

HTTP是一个客户端和服务端请求和应答的标准(TCP)。客户端指的是终端用户,服务端是服务器上的网站。通过使用Web浏览器、网络爬虫或者其他的工具,客户端发起一个到服务器上指定端口(默认是80)的HTTP请求,基本原理如下:

image.gif 编辑

常用的请求方式如下(最常用的就是GET和POST两种方式):

image.gif 编辑 1.2 Web工作原理

遵循HTTP协议,就可以向服务器发送请求,并接收消息。这中间有经历了什么呢?思考一下。其实这里面经历了Web的数据处理,处理流程如下图:

image.gif 编辑

第一步:用户在浏览器中输入网址,比如"www.123xxx.com",浏览器会去请求DNS服务器,DNS(Domain Name System)是“域名系统”的英文简称,是一种组织成域层次结构的计算机和网络服务命名系统,应用于TCP/IP网络,从事将主机名或者域名转换为实际IP地址的工作。DNS就像一个翻译官,将“www.123xxx.com”翻译成IP地址“101.200.120.88”。

第二步:DNS将翻译过来的IP地址传递给浏览器。

第三步:浏览器通过IP地址找到IP对应的Web服务器(通常是Apache或者Nginx),建立TCP连接,并向服务器发送HTTP Request(请求)包。

第四步:Web服务器发现用户访问了后缀为“.php”的文件,如index.php文件,那么服务器就会访问PHP解析引擎。

第五步:PHP在解析时,发现需要使用数据库。于是,连接数据库,访问数据库服务器。

第六步:数据库根据查询条件,查找数据返回给PHP引擎。

第七步:PHP引擎拼接数据,解析成HTML,返回给Web服务器。

第八步:Web服务器将HTML文件返回给浏览器,浏览器开始解析HTML文件,此时,用户在浏览器中就可以看到访问的网站内容了。

注意:这期间搭建要熟悉HTML CSS以及JavaScript的知识点,会表单创建。

2 PHP获取表单数据

PHP获取表单数据很显然,PHP充当的是服务端的角色。PHP接受数据的方式很简单,最常用的就是POST和GET方法接收数据。

如果客户端使用的是POST方式提交,提交表单域代码如下:

<form method="POST" action="register.php">
  <input type="text" name="username" value="张三">
  <!-- 省略代码 -->
</form>

image.gif

上述代码中,使用$_POST['username']接收<input>标签中的name属性为username的值,$_POST['username']值为“张三”。

如果以GET方式提交,则使用$_GET['username']接收。

image.gif


2.1 POST方式

用户注册页面register.html

<form name="RegForm" method="post" action="reg.php" onSubmit="return InputCheck(this)">
    <p>
        <label for="username" class="label">用户名:</label>
        <input id="username" name="username" type="text" class="input" />
        <span>(必填,3-15字符长度,支持汉字、字母、数字及_)</span>
        </p>
        <p>
        <label for="password" class="label">密 码:</label>
        <input id="password" name="password" type="password" class="input" />
        <span>(必填,不得少于6位)</span>
    </p>
    <p>
        <label for="repass" class="label">重复密码:</label>
        <input id="repass" name="repass" type="password" class="input" />
    </p>
    <p>
        <label for="email" class="label">电子邮箱:</label>
        <input id="email" name="email" type="text" class="input" />
        <span>(必填)</span>
    </p>
        <p>
        <input type="submit" name="submit" value="  提交注册  " class="left" />
        </p>
    </form>

image.gif

用户注册post方法显示页面reg.php

<?php
   $username = $_POST['username'];
   $password = $_POST['password'];
   $repass = $_POST['repass'];
   $email = $_POST['email'];
   echo "接收的用户名为:".$username."<br>";
   echo "接收的password为:".$password."<br>";
   echo "接收的repass为:".$repass."<br>";
   echo "接收的email为:".$email."<br>";
   $array = $_POST;//接收全面信息
   echo "<pre>";
   print_r($_POST);
?>

image.gif

显示结果如下:

image.gif 编辑

2.2 GET方式(仅仅是改了method方法)

<form name="RegForm" method="get" action="reg2.php" onSubmit="return InputCheck(this)">
    <p>
        <label for="username" class="label">用户名:</label>
        <input id="username" name="username" type="text" class="input" />
        <span>(必填,3-15字符长度,支持汉字、字母、数字及_)</span>
        </p>
        <p>
        <label for="password" class="label">密 码:</label>
        <input id="password" name="password" type="password" class="input" />
        <span>(必填,不得少于6位)</span>
    </p>
    <p>
        <label for="repass" class="label">重复密码:</label>
        <input id="repass" name="repass" type="password" class="input" />
    </p>
    <p>
        <label for="email" class="label">电子邮箱:</label>
        <input id="email" name="email" type="text" class="input" />
        <span>(必填)</span>
    </p>
        <p>
        <input type="submit" name="submit" value="  提交注册  " class="left" />
        </p>
    </form>

image.gif

reg2.php显示get方式的内容:

<?php
   $username = $_GET['username'];
   $password = $_GET['password'];
   $repass = $_GET['repass'];
   $email = $_GET['email'];
   echo "接收的用户名为:".$username."<br>";
   echo "接收的password为:".$password."<br>";
   echo "接收的repass为:".$repass."<br>";
   echo "接收的email为:".$email."<br>";
   $array = $_GET;//接收全面信息
   echo "<pre>";
   print_r($_GET);
?>

image.gif

显示结果如下:

image.gif 编辑

下篇 PHP和MySQL。  


相关文章
|
6月前
|
开发框架 JSON API
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
【7月更文挑战第22天】在Python Web开发中,设计高效的RESTful API涉及选择框架(如Flask或Django)、明确资源及使用HTTP方法(GET, POST, PUT, DELETE)来操作数据。响应格式通常是JSON,错误处理也很重要。示例展示了使用Flask创建图书管理API,包括版本控制、文档化、安全性和性能优化是最佳实践。这样的API使数据交互更顺畅。
102 2
|
2月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
60 3
|
2月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
58 1
|
3月前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
51 3
|
3月前
|
存储 JSON 前端开发
JSON与现代Web开发:数据交互的最佳选择
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也便于机器解析和生成。它以文本格式存储数据,常用于Web应用中的数据传输,尤其是在客户端和服务器之间。
102 0
|
4月前
|
开发框架 JSON 缓存
震撼发布!Python Web开发框架下的RESTful API设计全攻略,让数据交互更自由!
在数字化浪潮推动下,RESTful API成为Web开发中不可或缺的部分。本文详细介绍了在Python环境下如何设计并实现高效、可扩展的RESTful API,涵盖框架选择、资源定义、HTTP方法应用及响应格式设计等内容,并提供了基于Flask的示例代码。此外,还讨论了版本控制、文档化、安全性和性能优化等最佳实践,帮助开发者实现更流畅的数据交互体验。
108 1
|
5月前
|
前端开发 JavaScript Serverless
Python+Dash快速web应用开发:回调交互篇(上)
Python+Dash快速web应用开发:回调交互篇(上)
128 3
|
5月前
|
JSON JavaScript 前端开发
Python+Dash快速web应用开发:回调交互篇(下)
Python+Dash快速web应用开发:回调交互篇(下)
99 1
|
5月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
86 3
|
5月前
|
开发者 UED
Axure“Web高端交互元件库”:产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容,分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件,设计师与开发者可以根据具体项目需求,快速找到并应用这些元件,从而大大提升工作效率。