目录
我看到不少初级运维,连前后怎么向后端提交数据的都不懂!一问就回了一句“没学过开发”,那个汗颜啊~~
所以本章打算教一下前后使用HTML,后端使用PHP,做一个简单的向网站提交数据,主要使用GET和POST两种方式
如果没基础,没关系直接看《HTML教程》主要使用的是的表单部分,如果你真的很懒,你也可以直接不看
php可以看《PHP教程》,也可以不看,主要是输出你提交的数据而已。
此教程
TML使用的是本地win7编写的,我这里使用webStorm进行HTML编写,也可以不要,直接复制我的代码也行。
PHP使用的是LNMP,搭建可以看我的《hualinux2.5 环境搭建:centos8安装LNMP》,使用PHPStorm编写PHP,也可不要
一、HTML语法(熟悉可跳过)
1.1 使用语法
<标签>内容</标签>
注:新的html5如果内容没有可以写成<标签/>
- HTML 标签是由尖括号包围的关键词,比如 <html>
- HTML 标签通常是成对出现的,比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
固定格式为:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--在这里写内容就行了-->
</body>
</html>
上面的每对标签只能出现一次,在<body>...</body>之间写东西就行了,可以嵌套其它标签,有兴趣可以看《HTML教程》
1.2 HTML标签英文全称
有些人反映老是记不住HTML标签,这里我贴出全称
HTML标签 | 英文全称 | 中文释义 |
a | Anchor | 锚 |
abbr | Abbreviation | 缩写词 |
acronym | Acronym | 取首字母的缩写词 |
address | Address | 地址 |
dfn | Defines a Definition Term | 定义定义条目 |
kbd | Keyboard | 键盘(文本) |
samp | Sample | 示例(文本 |
var | Variable | 变量(文本) |
tt | Teletype | 打印机(文本) |
code | Code | 源代码(文本) |
pre | Preformatted | 预定义格式(文本 ) |
blockquote | Block Quotation | 区块引用语 |
cite | Citation | 引用 |
q | Quotation | 引用语 |
strong | Strong | 加重(文本) |
em | Emphasized | 加重(文本) |
b | Bold | 粗体(文本) |
i | Italic | 斜体(文本) |
big | Big | 变大(文本) |
small | Small | 变小(文本) |
sup | Superscripted | 上标(文本) |
sub | Subscripted | 下标(文本) |
bdo | Direction of Text Display | 文本显示方向 |
br | Break | 换行 |
center | Centered | 居中(文本) |
font | Font | 字体 |
u | Underlined | 下划线(文本) |
s/ strike | Strikethrough | 删除线 |
div | Division | 分隔 |
span | Span | 范围 |
ol | Ordered List | 排序列表 |
ul | Unordered List | 不排序列表 |
li | List Item | 列表项目 |
dl | Definition List | 定义列表 |
dt | Definition Term | 定义术语 |
dd | Definition Description | 定义描述 |
del | Deleted | 删除(的文本) |
ins | Inserted | 插入(的文本) |
h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
p | Paragraph | 段落 |
hr | Horizontal Rule | 水平尺 |
href | hypertext reference | 超文本引用 |
alt | alter | 替用(一般是图片显示不出的提示) |
src | Source | 源文件链接 |
cell | cell | 巢 |
cellpadding | cellpadding | 巢补白 |
cellspacing | cellspacing | 巢空间 |
nl | navigation lists | 导航列表 |
tr | table row | 表格中的一行 |
th | table header cell | 表格中的表头 |
td | table data cell | 表格中的一个单元格 |
<a> anchor 定义锚
<abbr> abbreviation 定义缩写
<acronym> 定义只取消首字母的缩写
<address> 定义地址元素
<area> 定义图像映射内部的区域
<b> bold 定义粗体字
<base> 定义页面当中的所有链接的基准链接
<bdo> bidirectional override 定义文字的显示方向
<big> 定义大号字
<blockquote> 定义长的引用
<body> 定义body元素
<br> break 插入一个回车
<button> 定义按钮
<caption> 定义表格标题
<cite> citation 定义引用
<code> computer code 定义计算机代码文本
<col> column 定义用于表格列的属性
<h1>to<h6> 定义标题1到标题6
<head> 定义关于文档的信息
<hr> horizontal 定义水平线
<html> hypertext markup language 定义html文档
<i> italic 定义斜体字
<iframe> inline frame 定义内联框架
<img> image 定义图像
<input> 定义输入域
<ins> inserted 定义被插入的文本
<kbd> keyboard 定义键盘文本
<label> 定义针对表单控件的标签
<legend> 定义框架集的标题
<li> list item 定义列表的项目
<link> 定义资源引用
<map> 定义图像映射
<meta> 定义元信息
<noframe> 定义无框架的节
<noscript> 定义无脚本的节
<object> 定义内嵌对象
<ol> ordered list 定义有序列表
<optgroup> option group 定义选项组
<option> 定义下拉列表的选项
<p> paragraph 定义段落
<param> 定义对象的参数
<pre> preformatted 定义预格式文本
<q> quotation 定义短的引用
<samp> sample 定义计算机代码样本
<script> 定义脚本
<select> 定义选择列表
<small> 定义小字体文本
<span> 定义文档中的节
<strong> stronger empasis定义强调文本
<style> 定义样式的定义
<sub> subscript 定义下标文本
<sup> superscript 定义上标文本
<table> 定义表格
<tbody> table body 定义表格的主体部分
<td> table data cell定义表格单元
<textarea> 定义文本区域
<tfoot> table foot定义表也的脚注
<th> table header cell定义表格的表头单元格
<thead> table head定义表格的标题
<title> 定义文档的标题
<tr> table row定义表格的行
<tt> teletype 定义打字机文本
<ul> unordered list 定义无序列表
<var> variable 定义变量
二、PHP语法(可以跳过)
<?
;php代码
php语法很简单可以看《PHP教程》和《PHP官方中文文档》
本文只用到 “$_GET 变量”和“$_POST 变量”
三、编写交互代码
3.1 需求及讲解
3.1.1 需求
上图填写“名字”“留言”点提交,就显示你的名字和留言的内容,
名字:hua 留言:php是世界上最好的语言
效果如下图所示:
要求使用get和post两种方式提交,并对比一下不同的地方
3.1.2 分析
HTML提交数据使得的是表单,表单是用于向服务器传输数据用的,
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
有兴趣的可以看一下《HTML表单》
我在这里HTML中可以使用的是<input>的text和 <textarea>实现
php的get方法可以使用$_GET,而post可以使用 $_POST
3.2 GET方式实现
3.2.1 HTML代码及解说
html代码,我放在桌面了,大家可以用记事本编写,然后另存为index.html就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<form method="get" action="http://192.168.3.11/note.php" enctype="application/x-www-form-urlencoded">
名字:<input type="text" name="username"><br>
留言:<br><textarea name="note" cols="30" rows="5" placeholder="请输入你的留言"></textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html>
注解:
form属于解说:
method="get":表示使用get方式,如果使用post可以把get改为post
action="http://192.168.3.11/note.php":表示处理这个get请求的文件路径,我的php文件在服务器上,路径是http://192.168.3.11/note.php
enctype: 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。
值 描述 application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编码。
在使用包含文件上传控件的表单时,必须使用该值。
text/plain 空格转换为 "+" 加号,但不对特殊字符编码。
input说明:标签用于搜集用户信息。
根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
type="text":表示是文本框,还有其它一堆类型,我这里就不说了,有求个可以看一下<input>
name:表示这个控制的名字,一定要写的!
from提交数据是 name属的值,以及value的值,如果少了name属性是不会提交 的!!
就是因为见到不少初学者都犯这个错误
提交按键 type="submit":必需写!这个是提交的意思,没有name,因为它只负责把form标签中包含有name的都提交到服务器中。
textarea:标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(通常是 Courier)。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸,不过更好的办法是使用 CSS 的 height 和 width 属性。
属性不说了,自己看
3.2.2 php代码及解说
我在PHP服务器上note.php代码为
<?php
echo $_GET['username'].'留言是:</br>';
echo '<pre style="border: 3px solid olivedrab;width: 25%">'.$_GET['note'].'</pre>';
解说:
echo:输出的意思,如果有个字符串连接使用点号.
$_GET:
预定义的 $_GET 变量用于收集来自 method="get" 的表单中的值。
从带有 GET 方法的表单发送的信息,对任何人都是可见的(会显示在浏览器的地址栏),并且对发送信息的量也有限制。
<pre style="border: 3px solid olivedrab;width: 25%">:
我加入的html标签,效果就是加一个绿色的框围着
3.2.3 运行效果并get分析
打开HTML我的放在桌面上,用的是火狐浏览器打开,输入如下图内容:
,
效果如下:
在上图中我们看URL地址的变化
http://192.168.3.11/note.php?username=hua¬e=php是世界上最好的语言,get方式
上面中
http://192.168.3.11/note.php:访问的是PHP服务器的note.php文件
问号?:连接作用,一般表示后是传参数的,可以理解为连接参数的作用
username=hua¬e=php是世界上最好的语言,get方式:
这些就是参数,对应的是form表单标签中含有name属性及值,第一个是我在html使用的是input的文本,name设置为username,value的值为hua,它们形式是
name的值=value的值
所以我这里是username=hua,同理那2个也一样,这里不就说了
&:不同参数的间隔符,我这里有2对参数,所以使用了&连接号
有些眼尖的人还看到你自己发送的内容在URL上显示了!!!对,这就是get方式,直接以明文方式在URL使用参数提交的!所以使用用户名和密码登陆方式,不能使用get方式!!
我这里再在火狐浏览器上按F12,会弹出开发者工具菜单,选择“网络”
再退回再次提交看一下,发现会有很多东西可以看,如下图所示:
再点一下响应头
这些东西我就不理解了,有兴趣可以看一下《图解HTTP》
3.3 使用post方式提交
3.3.1 HTML代码
只需要把method方式改为post就行了,其它不需要修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<form method="post" action="http://192.168.3.11/note.php" enctype="application/x-www-form-urlencoded">
名字:<input type="text" name="usernmae"><br>
留言:<br><textarea name="note" cols="30" rows="5" placeholder="请输入你的留言"></textarea><br>
<input type="submit" value="提交">
</form>
</body>
</html>
3.3.2 PHP代码
把$_GET改为$_POST
<?php
echo $_POST['username'].'留言是:</br>';
echo '<pre style="border: 3px solid olivedrab;width: 25%">'.$_POST['note'].'</pre>';
3.3.3 效果并分析
按下图输入内容并提交:
效果如下图所示:
发现post提交并不像get提交URL上会多出一些东西,连提交的内容都是明文显示的。这里是什么都没有看到,但数据的确提交到服务器上了。
所以说post提交适合于
1.不想别人看到内容的,如用户名和密码
2.提交大的数据,一般get提交的数据不能超过4k,有的浏览器是8k,决定于浏览器,毕竟URL长度是有限的
四、补充内容
如果做运维久的人会发现有的人用get提交时,发现也并不是所有的传参用?分隔的啊,有的用/,这是因为是进行了修改了,使用的不是默认风格而是PATH_INFO用斜杠把参数隔开了。