HTTP前端请求

目录

    • HTTP 请求
      • 1.请求组成
      • 2.请求方式与数据格式
        • get 请求示例
        • post 请求示例
        • json 请求示例
        • multipart 请求示例
        • 数据格式小结
      • 3.表单
        • 3.1.作用与语法
        • 3.2.常见的表单项
      • 4.session 原理
      • 5.jwt 原理

HTTP 请求

1.请求组成

请求由三部分组成

  1. 请求行
  2. 请求头
  3. 请求体

可以用 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: 21name=%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 表单,用于展示文件选择框、隐藏框以及其他表单元素的应用。

  1. fieldset: 用于将相关的表单元素组合在一起并创建边框。

  2. legend: 定义字段集的标题。

  3. <h4>: 表示一个小标题。

  4. <input type="text">: 用于接收用户输入的文本。

  5. <input type="radio">: 表示单选按钮。

  6. <input type="file">: 创建一个文件选择框,用于上传文件。

  7. <input type="hidden">: 创建一个隐藏的文本输入框,用户无法看见或修改该值,但会在提交表单时随表单数据一起被发送到服务器。

  8. <textarea>: 创建多行输入框,用于用户输入多行文本。

  9. <select>: 创建一个下拉框(选择框)。

  10. <option>: 定义下拉框中的选项。

  11. <button>: 创建一个按钮,用于触发表单的提交。

  12. <form>: 创建一个表单,用于包含表单元素。

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

  1. <fieldset> 元素的属性:

    • width: 设置字段集的宽度。
    • height: 设置字段集的高度。
    • margin: 设置字段集的外边距。
  2. <input type="text"> 元素的属性:

    • type: 指定输入框的类型,这里是文本输入框。
    • name: 指定输入框的名称,用于标识表单数据。
    • size: 设置输入框的尺寸,这里是可见字符数。
  3. <input type="radio"> 元素的属性:

    • type: 指定输入框的类型,这里是单选按钮。
    • name: 指定一组单选按钮的名称,用于标识表单数据。
    • value: 指定单选按钮的值。
    • checked: 设置单选按钮的初始选中状态。
  4. <input type="file"> 元素的属性:

    • type: 指定输入框的类型,这里是文件选择框。
    • name: 指定输入框的名称,用于标识选择的文件。
  5. <input type="hidden"> 元素的属性:

    • type: 指定输入框的类型,这里是隐藏输入框。
    • name: 指定输入框的名称,用于标识隐藏的表单数据。
    • value: 指定隐藏输入框的值。
  6. <textarea> 元素的属性:

    • name: 指定多行文本输入框的名称。
    • rows: 设置多行文本框的行数。
    • cols: 设置多行文本框的列数。
    • wrap: 规定文本在多行文本框中的换行方式。
  7. <select> 元素的属性:

    • name: 指定选择框的名称。
    • size: 设置选择框的可见选项数。
    • multiple: 规定可同时选择多个选项。
  8. <option> 元素的属性:

    • value: 指定选项的值。
    • selected: 设置选项的初始选中状态。
  9. <button> 元素的属性:

    • type: 指定按钮的类型,这里是提交按钮。
    • onclick: 指定按钮被点击时触发的函数。
    • value: 指定按钮的值。
      当您点击这两个按钮时,将执行相应的操作。下面是对每个按钮的介绍:
  10. <input type="reset"> 元素的属性:

    • type: 指定按钮的类型,这里是重置按钮。
    • value: 指定按钮上显示的文本内容。
    • onclick: 指定按钮被点击时触发的函数。

    当点击这个按钮时,表单中的所有输入将被重置为初始值。并且如果定义了 onclick 函数,将调用相应的 JavaScript 函数来处理重置按钮的点击事件。

  11. <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 技术实现身份验证

Client LoginController LoginInterceptor Session 登录请求 检查用户名,密码,验证通过 存入用户名 登录成功 其它请求 获取用户名 用户名存在,放行 Client LoginController LoginInterceptor Session

5.jwt 原理

jwt 技术实现身份验证

Client LoginController LoginInterceptor 登录请求 检查用户名,密码,验证通过 登录成功,返回token 其它请求,携带token 校验token,校验无误,放行 Client LoginController LoginInterceptor

生成 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《我在北京送快递》平凡隽永的时刻,对人生更具意义

《我在北京送快递》平凡隽永的时刻&#xff0c;对人生更具意义 胡安焉 文章目录 《我在北京送快递》平凡隽永的时刻&#xff0c;对人生更具意义[toc]摘录感悟 摘录 转“没有期限的承诺无疑就是委婉的拒绝” 转书友&#xff1a;亨利福特说&#xff0c;我聘的是一双手&#xff0…

Codeforces Round 917 (Div. 2)

Codeforces Round 917 (Div. 2) Codeforces Round 917 (Div. 2) A. Least Product 题意&#xff1a; 给出整数数组a&#xff0c;现在可以执行任意次数以下操作&#xff1a;任意选择数组a的一个元素 a i a_i ai​&#xff0c;若 a i a_i ai​>0可以任意替换为[0, a i a_i…

U盘加密软件哪个好用(三款优秀的U盘加密软件推荐)

随着移动存储设备的普及&#xff0c;U盘已成为我们工作和生活中不可或缺的存储工具。然而&#xff0c;U盘丢失或被盗的风险也随之增加&#xff0c;如何保护U盘中的敏感数据成为了重要的问题。 此时&#xff0c;U盘加密软件成为了解决这一问题的有效手段。 那么&#xff0c;哪个…

nosql--RedisTemplate定制化

nosql--RedisTemplate定制化 1、序列化2、如果使用redis中保存数据会使用默认的序列化机制&#xff0c;导致redis中保存的对象不可视2.1将所有的对象以JSON的形式保存2.2配置reids自定义配置2.3转化成功2.4配置文件代码 3redis客户端 1、序列化 stringRedisTemplate RedisTemp…

Linux操作系统——进程(三) 进程优先级

进程优先级 首先呢&#xff0c;我们知道一个进程呢&#xff08;或者也可以叫做一个任务&#xff09;&#xff0c;它呢有时候要在CPU的运行队列中排队&#xff0c;要么有时候阻塞的时候呢又要在设备的等待队列中排队&#xff0c;其实我们排队的本质就是&#xff1a;确认优先级。…

用水用电用燃气PSD大屏文件,电力行业可视化大数据(供水供电可视化管理后台资料)

通过对水、电、燃气等能源的使用情况进行统计和分析&#xff0c;可以有效地预测能源需求&#xff0c;为企业的能源管理提供决策依据。现分享大屏燃气大数据可视化平台、电力行业可视化大数据展示平台、大工商业用气快速报告、供水供电可视化管理后台等大屏模版的Photoshop源文件…

[Linux] Mysql数据库中的用户管理与授权

一、登录用户的管理 1.1 查看用户密码的信息 用户信息存放在 mysql 数据库下的 user 表&#xff08;MySQL 服务下存在一个系统自带的 mysql 数据库&#xff09;。 use mysql ; show tables; desc user; 查看密码信息的命令&#xff1a; 能看到密码信息&#xff1a;是经过加…

数据库管理-第127期 LSM Tree(202301225)

数据库管理-第127期 LSM Tree&#xff08;202301225&#xff09; 说起分布式数据库&#xff0c;绕不开的一个话题就是LSM Tree&#xff0c;全称为log-structured merge-tree&#xff0c;回到吕海波老师授权过的那句话“没搞过Oracle的&#xff0c;但又是数据库圈里的人&#x…

matlab设置colorbar标题的两种方式

%% 第一种 figure; A rand(3,4,3); A1 A(:,:,1); A2 A(:,:,2); A3 A(:,:,3); contourf(A1,A2,A3,30); colormap(jet);colorbar; my_handlecolorbar; my_handle.Label.String depth/km; my_handle.Label.FontSize 15;%% 第二种 figure; A rand(3,4,3); A1 A(:,:,1); A2 …

隔壁小孩馋哭了都要问我要的MySQL数据库攻略

1 Mysql数据库 1.1 数据库概念 数据 描述事物的符号记录 包括数字、文字、图形、图像声音、档案记录等 以“记录”形式按统一的格式进行存储 表 将不同的记录组织在一起 用来存储具体数据 数据库 标的合集&#xff0c;是存储数据的仓库 以定的组织方式存储打的相互有…

等级保护安全的管理机构与管理制度

目录 安全管理机构的控制点 岗位设置 人员配备 授权和审批 沟通和合作 审核和检查 安全管理制度的控制点 安全管理制度 指定和发布 评审和修订 安全管理机构的控制点 岗位设置 人员配备 授权和审批 沟通和合作 审核和检查 安全管理制度的控制点 安全管理制度 指定…

云卷云舒:算力网络+云原生(中):探索构建算力网络数据库

一、导言 1、基础要求&#xff1a;算力网络时代&#xff0c;数据类型、范围充分延展和爆发&#xff0c;数据库也要适应起来&#xff0c;分布式数据库是起步要求&#xff1b; 2、近期需求&#xff1a;通过云服务的方式提供算网时代&#xff0c;尤其是智能大模型所需要的向量数…

042、文本与语言模型

之——nlp基础 目录 之——nlp基础 杂谈 正文 1.文本预处理 2.语言模型 3.语言模型实现 杂谈 在语言模型中&#xff0c;需要对文本进行预处理&#xff0c;进行数字化的一系列操作&#xff0c;而后才能进行网络的拟合。 以前的相关&#xff1a;词性判断 正文 1.文本预处…

简易的555函数信号发生器电路图

函数信号发生器是一种信号发生装置&#xff0c;能产生某些特定的周期性时间函数波形&#xff08;正弦波、方波、三角波、锯齿波和脉冲波等&#xff09;信号&#xff0c;频率范围可从几个微赫到几十兆赫。除供通信、仪表和自动控制系统测试用外&#xff0c;还广泛用于其他非电测…

基于深度学习的安全帽检测识别系统(含UI界面、yolov5、Python代码、数据集)

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov5 yolov5主要包含以下几种创新&#xff1a;         1. 添加注意力机制&#xff08;SE、CBAM、CA等&#xff09;         2. 修改可变形卷积&#xff08;DySnake-主…

Wireshark网络工具来了

Wireshark是网络包分析工具。网络包分析工具的主要作用是尝试捕获网络包&#xff0c;并尝试显示包的尽可能详细的情况。 Wireshark是一个免费开源软件&#xff0c;不需要付费&#xff0c;免费使用&#xff0c;可以直接登陆到Wireshark的官网下载安装。 在windows环境中&#x…

FPFA.一种二倍频电路代码描述以及测量详情

一、前言 1、因为需要倍频电路所以找了个二倍频的电路&#xff0c;通过fpga实际测量发现经过倍频后的电路峰值降低。不过这个也正常&#xff0c;因为该电路只要过触发点就会开始发生波形变化&#xff0c;而电路的触发值不是峰值。​​​​​​​ 2、继续对电路做倍频后信号做二…

嵌入式开发常见的3个C语言技巧

​1.操作寄存器 在嵌入式开发中&#xff0c;常常要操作寄存器&#xff0c;对寄存器进行写入&#xff0c;读出等等操作。每个寄存器都有自己固有的地址&#xff0c;通过C语言访问这些地址就变得尤为重要。 #define GSTATUS1 (*(volatile unsigned int *)0x560000B0)在这里…

国外加固Appdome环境检测与绕过

文章目录 前言第一部分&#xff1a;定位检测逻辑的通用思路1. 通过linux“一切皆文件”思路定位2. 分析现有检测软件猜测可能检测点3. 通过正向开发思路定位4. 通过activity及弹窗定位 第二部分&#xff1a;检测结果展示整体流程1. Jni反射调用doDispath完成广播发送2. NativeB…

第11章 GUI Page439 步骤十二 为图元编号 支持直线

运行效果&#xff1a; 关键代码&#xff1a; 为IItem类新增三个函数&#xff0c;两个纯虚 为直线类&#xff0c;新增一个_index成员&#xff0c;并实现GetIndex和SetIndex两个函数 窗口类新增一个 _item_id成员&#xff0c;并初始化 在将图元压入队列之前&#xff0c;设置图元…