hualinux 编程概念 3.6:浏览器是如何和网站交互数据的(新手必看!)

目录

一、HTML语法(熟悉可跳过)

1.1 使用语法

1.2 HTML标签英文全称

二、PHP语法(可以跳过)

三、编写交互代码

3.1 需求及讲解

3.1.1 需求

3.1.2 分析

3.2 GET方式实现

3.2.1 HTML代码及解说

3.2.2 php代码及解说

3.2.3 运行效果并get分析

3.3 使用post方式提交

3.3.1 HTML代码

3.3.2 PHP代码

3.3.3 效果并分析

四、补充内容


我看到不少初级运维,连前后怎么向后端提交数据的都不懂!一问就回了一句“没学过开发”,那个汗颜啊~~

所以本章打算教一下前后使用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 元素,比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menustextareafieldsetlegend 和 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&note=php是世界上最好的语言,get方式

上面中

http://192.168.3.11/note.php:访问的是PHP服务器的note.php文件

问号?:连接作用,一般表示后是传参数的,可以理解为连接参数的作用

 

username=hua&note=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用斜杠把参数隔开了。

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值