HTTP前端请求

2023-12-22 20:16:47

HTTP 请求

1.请求组成

请求由三部分组成

请求行
请求头
请求体

可以用 telnet 程序测试

2.请求方式与数据格式

get 请求示例

GET /test2?name=%E5%BC%A0&age=20 HTTP/1.1
Host: localhost

%E5%BC%A0 是【张】经过 URL 编码后的结果

post 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 21

name=%E5%BC%A0&age=18

application/x-www-form-urlencoed 格式细节：

参数分成名字和值，中间用 = 分隔
多个参数使用 & 进行分隔
【张】等特殊字符需要用 encodeURIComponent() 编码为【%E5%BC%A0】后才能发送

json 请求示例

POST /test3 HTTP/1.1
Host: localhost
Content-Type: application/json
Content-Length: 25

{"name":"zhang","age":18}

json 对象格式

{"属性名":属性值}

其中属性值可以是

字符串 “”
数字
true, false
null
对象
数组

json 数组格式

[元素1, 元素2, ...]

multipart 请求示例

POST /test2 HTTP/1.1
Host: localhost
Content-Type: multipart/form-data; boundary=123
Content-Length: 125

--123
Content-Disposition: form-data; name="name"

lisi
--123
Content-Disposition: form-data; name="age"

30
--123--

boundary=123 用来定义分隔符
起始分隔符是 --分隔符
结束分隔符是 --分隔符--

数据格式小结

客户端发送

编码
- application/x-www-form-urlencoded ：url 编码
- application/json：utf-8 编码
- multipart/form-data：每部分编码可以不同
表单只支持以 application/x-www-form-urlencoded 和 multipart/form-data 格式发送数据
文件上传需要用 multipart/form-data 格式
js 代码可以支持任意格式发送数据

服务端接收

对 application/x-www-form-urlencoded 和 multipart/form-data 格式的数据，Spring 接收方式是统一的，只需要用 java bean 的属性名对应请求参数名即可
对于 applicaiton/json 格式的数据，Spring 接收需要使用 @RequestBody 注解 + java bean 的方式

3.表单

服务器常用表单向后端提交数据。

3.1.作用与语法

表单的作用：收集用户填入的数据，并将这些数据提交给服务器

表单的语法

<form action="服务器地址" method="请求方式" enctype="数据格式">
    <!-- 表单项 -->
    
    <input type="submit" value="提交按钮">
</form>

method 请求方式有
- get （默认）提交时，数据跟在 URL 地址之后
- post 提交时，数据在请求体内
enctype 在 post 请求时，指定请求体的数据格式
- application/x-www-form-urlencoded（默认）
- multipart/form-data
其中表单项提供多种收集数据的方式
- 有 name 属性的表单项数据，才会被发送给服务器

3.2.常见的表单项

文本框

<input type="text" name="uesrname">

密码框

<input type="password" name="password">

隐藏框

<input type="hidden" name="id">

日期框

<input type="date" name="birthday">

单选

<input type="radio" name="sex" value="男" checked>
<input type="radio" name="sex" value="女">

多选

<input type="checkbox" name="fav" value="唱歌">
<input type="checkbox" name="fav" value="逛街">
<input type="checkbox" name="fav" value="游戏">

文件上传

<input type="file" name="avatar">

代码小结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文件选择框和隐藏框的应用</title>
		<style type="text/css">
			fieldset{width: 500px;height: 500px;margin: 20px;}
		</style>
	</head>
	<body>
		<form>
			<fieldset>
				<legend>文件选择框与隐藏框的应用</legend>
				<h4>请输入个人信息</h4>
				姓名：<input type="text" name="name" size="10"/>
				性别：<input type="radio" name="sex" value="male" checked/>男
				<input type="radio" name="sex" value="female"/>女&nbsp;
				年龄：<input type="text" name="age" size="8"/><br/>
				<h4>请选择照片文件：</h4>
				<input type="file" name="file"/><br />
				<input type="hidden" name="admin" value="ABCD"/>
				<h3>请您填写宝贵意见：</h3>
				<textarea name="info" rows="4" cols="50" wrap="virtual"></textarea>
				<h4>下拉框列表</h4>
				<select  name="" size="2" 
				multiple>  <!--规定可选多个选项-->
				<option value="c1" selected>c/c++程序设计</option>
				<option value="c2">计算机网络</option>
				<option value="c3">数据结构</option>
				</select>
				<button type="submit" onclick="$()" value="">提交</button>
				<input type="reset" value="重置" onclick="$()"/>
				<input type="button" value="注册新用户" onclick="javascript:alert('注册新用户');"/>
			</fieldset>
		</form>
	</body>
</html>

这段代码是一个简单的 HTML 表单，用于展示文件选择框、隐藏框以及其他表单元素的应用。

fieldset: 用于将相关的表单元素组合在一起并创建边框。
legend: 定义字段集的标题。
<h4>: 表示一个小标题。
<input type="text">: 用于接收用户输入的文本。
<input type="radio">: 表示单选按钮。
<input type="file">: 创建一个文件选择框，用于上传文件。
<input type="hidden">: 创建一个隐藏的文本输入框，用户无法看见或修改该值，但会在提交表单时随表单数据一起被发送到服务器。
<textarea>: 创建多行输入框，用于用户输入多行文本。
<select>: 创建一个下拉框（选择框）。
<option>: 定义下拉框中的选项。
<button>: 创建一个按钮，用于触发表单的提交。
<form>: 创建一个表单，用于包含表单元素。

接下来逐个介绍每个元素的属性。

<fieldset> 元素的属性:
- width: 设置字段集的宽度。
- height: 设置字段集的高度。
- margin: 设置字段集的外边距。
<input type="text"> 元素的属性:
- type: 指定输入框的类型，这里是文本输入框。
- name: 指定输入框的名称，用于标识表单数据。
- size: 设置输入框的尺寸，这里是可见字符数。
<input type="radio"> 元素的属性:
- type: 指定输入框的类型，这里是单选按钮。
- name: 指定一组单选按钮的名称，用于标识表单数据。
- value: 指定单选按钮的值。
- checked: 设置单选按钮的初始选中状态。
<input type="file"> 元素的属性:
- type: 指定输入框的类型，这里是文件选择框。
- name: 指定输入框的名称，用于标识选择的文件。
<input type="hidden"> 元素的属性:
- type: 指定输入框的类型，这里是隐藏输入框。
- name: 指定输入框的名称，用于标识隐藏的表单数据。
- value: 指定隐藏输入框的值。
<textarea> 元素的属性:
- name: 指定多行文本输入框的名称。
- rows: 设置多行文本框的行数。
- cols: 设置多行文本框的列数。
- wrap: 规定文本在多行文本框中的换行方式。
<select> 元素的属性:
- name: 指定选择框的名称。
- size: 设置选择框的可见选项数。
- multiple: 规定可同时选择多个选项。
<option> 元素的属性:
- value: 指定选项的值。
- selected: 设置选项的初始选中状态。
<button> 元素的属性:
- type: 指定按钮的类型，这里是提交按钮。
- onclick: 指定按钮被点击时触发的函数。
- value: 指定按钮的值。
  当您点击这两个按钮时，将执行相应的操作。下面是对每个按钮的介绍：
<input type="reset"> 元素的属性:
- type: 指定按钮的类型，这里是重置按钮。
- value: 指定按钮上显示的文本内容。
- onclick: 指定按钮被点击时触发的函数。
当点击这个按钮时，表单中的所有输入将被重置为初始值。并且如果定义了 onclick 函数，将调用相应的 JavaScript 函数来处理重置按钮的点击事件。
<input type="button"> 元素的属性:
- type: 指定按钮的类型，这里是普通按钮。
- value: 指定按钮上显示的文本内容。
- onclick: 指定按钮被点击时触发的函数。
当点击这个按钮时，将弹出一个对话框显示 “注册新用户” 的提示信息。在这个示例代码中，点击按钮将触发内联 JavaScript 代码 javascript:alert('注册新用户');，弹出一个包含文本 “注册新用户” 的提示框。

效果如下
在这里插入图片描述

4.session 原理

Http 无状态，有会话

无状态是指，请求之间相互独立，第一次请求的数据，第二次请求不能重用
有会话是指，客户端和服务端都有相应的技术，可以暂存数据，让数据在请求间共享

服务端使用了 session 技术来暂存数据

存

GET /s1?name=zhang HTTP/1.1
Host: localhost

取

GET /s2 HTTP/1.1
Host: localhost
Cookie: JSESSIONID=560FA845D02AE09B176E1BC5D9816A5D

session 技术实现身份验证

5.jwt 原理

jwt 技术实现身份验证

生成 token

GET /j1?name=zhang&pass=123 HTTP/1.1
Host: localhost

校验 token

GET /j2 HTTP/1.1
Host: localhost
Authorization: eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiJ9._1-P_TLlzQPb1_lCyGwplMZaKQ8Mcw_plBbYPZ3OX28

文章来源:https://blog.csdn.net/m0_62943934/article/details/135155984
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！