HTTP前端请求
目录
-
- HTTP 请求
-
- 1.请求组成
- 2.请求方式与数据格式
-
- get 请求示例
- post 请求示例
- json 请求示例
- multipart 请求示例
- 数据格式小结
- 3.表单
-
- 3.1.作用与语法
- 3.2.常见的表单项
- 4.session 原理
- 5.jwt 原理
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"/>女
年龄：<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: 定义字段集的标题。 -
: 表示一个小标题。 -
: 用于接收用户输入的文本。 -
: 表示单选按钮。 -
: 创建一个文件选择框，用于上传文件。 -
: 创建一个隐藏的文本输入框，用户无法看见或修改该值，但会在提交表单时随表单数据一起被发送到服务器。 -