当前位置： 首页 > news >正文

HTTP前端请求

news 2026/3/30 16:25:00

目录

    • 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前端请求

目录 HTTP 请求1.请求组成2.请求方式与数据格式get 请求示例post 请求示例json 请求示例multipart 请求示例数据格式小结 3.表单3.1.作用与语法3.2.常见的表单项 4.session 原理5.jwt 原理 HTTP 请求 1.请求组成 请求由三部分组成 请求行请求头请求体 可以用 telnet 程序测…...

编程日记 2023/12/24 18:09:52

前端性能优化二十四：花裤衩模板第三方库打包

(1). 工作原理: ①. externals配置在所创建bundle时:a. 会依赖于用户环境(consumers environment)中的依赖,防止将某些import的包(package)打包到bundle中b. 在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)②. webpack会检测这些组件是否在externals中注…...

编程日记 2023/12/24 18:08:50

多维时序 | MATLAB实现BiTCN-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现BiTCN-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现BiTCN-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现BiTCN-Multihea…...

编程日记 2023/12/24 18:05:48

Qt的简单游戏实现提供完整代码

文章目录 1 项目简介2 项目基本配置2.1 创建项目2.2 添加资源 3 主场景3.1 设置游戏主场景配置3.2 设置背景图片3.3 创建开始按钮3.4 开始按钮跳跃特效实现3.5 创建选择关卡场景3.6 点击开始按钮进入选择关卡场景 4 选择关卡场景4.1场景基本设置4.2 背景设置4.3 创建返回按钮4.…...

编程日记 2023/12/24 18:01:44

SpringMVC之文件的下载

系列文章目录 提示&#xff1a;这里可以添加系列文章的所有文章的目录&#xff0c;目录需要自己手动添加 SpringMVC之文件的下载 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、文件下载实现…...

编程日记 2023/12/24 18:00:44

计算机组成原理第6章-（算术运算）【下】

移位运算 对于有符号数的移位称为算术移位，对于无符号数的移位称为逻辑移位。 算术移位规则【极其重要】 对于正数的算术移位，且不管是何种机器数【原码、反码、补码】，移位后出现的空位全部填0。 而对于负数的算术移位，机器数不同，移位后的规则也不同。 对于负数的原…...

编程日记 2023/12/24 17:57:40

【开题报告】基于微信小程序的校园资讯平台的设计与实现

1.选题背景与意义 随着移动互联网的快速发展&#xff0c;微信成为了人们日常生活中不可或缺的工具之一。在校园生活中&#xff0c;学生们对于校园资讯的获取和交流需求也越来越高。然而&#xff0c;传统的校园资讯发布方式存在信息不及时、传播范围有限等问题&#xff0c;无法…...

编程日记 2023/12/24 17:56:39

VUE前端导出文件之file-saver插件

VUE前端导出文件之file-saver插件 安装 npm install file-saver --save # 如使用TS开发&#xff0c;可安装file-saver的TypeScript类型定义 npm install types/file-saver --save-dev如果需要保存大于 blob 大小限制的非常大的文件&#xff0c;或者没有 足够的 RAM&#xff0…...

编程日记 2023/12/24 17:52:35

【Earth Engine】协同Sentinel-1/2使用随机森林回归实现高分辨率相对财富（贫困）制图

目录 1 简介与摘要2 思路3 效果预览4 代码思路5 完整代码6 后记 1 简介与摘要 最近在做一些课题&#xff0c;需要使用Sentinel-1/2进行机器学习制图。 然后想着总结一下相关数据和方法&#xff0c;就花半小时写了个代码。 然后再花半小时写下这篇博客记录一下。 因为基于多次拍…...

编程日记 2023/12/24 17:44:29

C++ 检测 是不是 com组件 的办法 已解决

在日常开发中&#xff0c;遇到动态库和 com组件库的调用 无法区分。检测是否com组件的办法 在头部文件&#xff0c;引入文件 如果能编译成功说明是 com组件&#xff0c;至于动态库如何引入&#xff0c;还在观察中 最简单办法 regsvr32 TerraExplorerX.dll 是com 组件 regs…...

编程日记 2023/12/24 17:43:29

linux buffer的回写的触发链路

mark_buffer_dirty中除了会标记dirty到buffer_head->state、page.flag、folio->mapping->i_pages外&#xff0c;还会调用inode所在文件系统的dirty方法&#xff08;inode->i_sb->s_op->dirty_inode&#xff09;。然后为inode创建一个它所在memory group的wri…...

编程日记 2023/12/24 17:41:27

Lambda表达式超详解

目录 背景 Lambda表达式的用法 函数式接口 Lambda表达式的基本使用 语法精简 变量捕获 匿名内部类 匿名内部类中的变量捕获 Lambda的变量捕获 Lambda表达式在类集中的使用 Collection接口 List接口 Map接口 总结 背景 Lambda表达式是Java SE 8中的一个重要的新特性.…...

编程日记 2023/12/24 17:39:25

西门子博途与菲尼克斯无线蓝牙模块通讯

菲尼克斯无线蓝牙模块 正常运行时，可以使用基站控制字0发送00E0（得到错误代码命令） 正常运行时，可以使用基站控制字0发送00E0（得到错误代码命令）得到各个无线I/O是否连 接的信号（状态字IN word 1的第2、6、10位） 小车1连接状态 小车2连接状态 小车3连接状态 1#小车自…...

编程日记 2023/12/24 17:35:22

vue2 之 实现pdf电子签章

一、前情提要 1. 需求 仿照e签宝&#xff0c;实现pdf电子签章 > 拿到pdf链接&#xff0c;移动章的位置&#xff0c;获取章的坐标 技术 : 使用fabric pdfjs-dist vuedraggable 2. 借鉴 一位大佬的代码仓亏 : 地址 一位大佬写的文章 &#xff1a;地址 3. 优化 在大佬的代码…...

编程日记 2023/12/24 17:31:19

什么是MVC？MVC框架的优势和特点

目录 一、什么是MVC 二、MVC模式的组成部分和工作原理 1、模型&#xff08;Model&#xff09; 2、视图&#xff08;View&#xff09; 3、控制器&#xff08;Controller&#xff09; 三、MVC模式的工作过程如下&#xff1a; 用户发送请求&#xff0c;请求由控制器处理。 …...

编程日记 2023/12/24 17:28:16

主从复制mysql-replication | Replication故障排除

主从复制mysql-replication 准备环境 #防火墙 selinux systemctl stop firewalld --now &&setenforce 0 #修改主机名&#xff1a;hostnamectl set-hostname 名字 tip&#xff1a;vim /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPRTOTstatic IPADDR192.168.100.…...

编程日记 2023/12/24 17:27:15

基于Java SSM框架实现教学质量评价评教系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现教学质量评价评教系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;教学质量评价系统当然也不能排除在外。教学质量评价系统是以实际运用为…...

编程日记 2023/12/24 17:25:14

03｜模型I/O：输入提示、调用模型、解析输出

03&#xff5c;模型I/O&#xff1a;输入提示、调用模型、解析输出 从这节课开始&#xff0c;我们将对 LangChain 中的六大核心组件一一进行详细的剖析。 模型&#xff0c;位于 LangChain 框架的最底层&#xff0c;它是基于语言模型构建的应用的核心元素&#xff0c;因为所谓 …...

编程日记 2023/12/24 17:23:11

springcloud-gateway-2-鉴权

目录 一、跨域安全设置 二、GlobalFilter实现全局的过滤与拦截。 三、GatewayFilter单个服务过滤器 1、原理-官方内置过滤器 2、自定义过滤器-TokenAuthGatewayFilterFactory 3、完善TokenAuthGatewayFilterFactory的功能 4、每一个服务编写一个或多个过滤器&#xff0c…...

编程日记 2023/12/24 17:21:09

实现一个最简单的内核

更好的阅读体验&#xff0c;请点击 YinKai s Blog | 实现一个最简单的内核。 ​ 这篇文章带大家实现一个最简单的操作系统内核—— Hello OS。 PC 机的引导流程 ​ 我们这里将借助 Ubuntu Linux 操纵系统上的 GRUB 引导程序来引导我们的 Hello OS。 ​ 首先我们得了解一下&a…...

编程日记 2023/12/24 17:16:04

双冗余链路实现（2/2期）

目录 拓扑&#xff1a; 基础需求&#xff1a; 出口路由器&#xff08;双路&#xff09;&#xff1a; 静态路由&#xff1a; 防火墙配置&#xff1a; 全区域互通透传&#xff1a; 静态路由&#xff1a; 冗余备份&#xff1a; 核心交换机&#xff1a; 静态路由&#xff…...

编程新知 2026/3/30 15:12:42

CodeSys自定义HTML5控件：从零构建到工程实践

1. 为什么需要自定义HTML5控件&#xff1f; 在工业自动化领域&#xff0c;可视化监控是设备管理的重要环节。CodeSys作为主流的工业控制开发平台&#xff0c;其WebVisu功能虽然提供了基础控件库&#xff0c;但在实际项目中经常会遇到这样的尴尬&#xff1a;标准控件无法满足特定…...

编程新知 2026/3/30 13:41:07

百川2-13B模型辅助C语言学习：从语法答疑到代码调试

百川2-13B模型辅助C语言学习&#xff1a;从语法答疑到代码调试 学C语言&#xff0c;尤其是刚入门那会儿&#xff0c;你是不是也经历过这样的时刻&#xff1f;面对指针、内存这些概念&#xff0c;感觉像在看天书&#xff1b;自己写的代码编译报错&#xff0c;满屏的红色提示让人…...

编程新知 2026/3/30 12:56:22

SillyTavern：重新定义AI角色扮演的沉浸式交互平台

SillyTavern&#xff1a;重新定义AI角色扮演的沉浸式交互平台 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 当我们在数字世界中寻找真实的情感连接时&#xff0c;AI对话系统往往陷入机械…...

编程新知 2026/3/30 12:22:12

Onnxruntime模型量化实战：从PTQ到精度调优

1. Onnxruntime模型量化入门指南 第一次接触模型量化时&#xff0c;我也被各种术语搞得晕头转向。简单来说&#xff0c;量化就是把模型参数从32位浮点数转换为8位整数&#xff0c;就像把高清图片压缩成更小的文件。Onnxruntime作为业界领先的推理引擎&#xff0c;提供了完整的量…...

编程新知 2026/3/30 11:05:38

Xinference+tao-8k实战：快速构建文档相似度分析工具

Xinferencetao-8k实战&#xff1a;快速构建文档相似度分析工具 1. 从想法到工具&#xff1a;为什么你需要一个文档相似度分析器 想象一下这个场景&#xff1a;你手头有几百份技术文档、产品说明或者客户反馈&#xff0c;你想快速找出哪些文档在讨论同一个主题&#xff0c;或者…...

编程新知 2026/3/30 10:30:16

Electron-builder打包Windows应用，我踩过的三个坑（附详细解决方案）

Electron-builder打包Windows应用&#xff1a;三个典型问题的深度解析与实战解决方案 第一次使用electron-builder打包Windows应用时&#xff0c;那种期待与焦虑交织的感觉至今记忆犹新。作为一个从Web前端转向桌面应用开发的程序员&#xff0c;我本以为有了Electron这个跨平台…...

编程新知 2026/3/30 9:41:54

Piping Server开发者指南：如何基于流传输构建自己的应用

Piping Server开发者指南&#xff1a;如何基于流传输构建自己的应用 【免费下载链接】piping-server Infinitely transfer between every device over pure HTTP with pipes or browsers 项目地址: https://gitcode.com/gh_mirrors/pi/piping-server Piping Server是一个…...

编程新知 2026/3/30 9:27:51

革新UE4资源管理：UnrealPakViewer全攻略

革新UE4资源管理&#xff1a;UnrealPakViewer全攻略 【免费下载链接】UnrealPakViewer 查看 UE4 Pak 文件的图形化工具&#xff0c;支持 UE4 pak/ucas 文件 项目地址: https://gitcode.com/gh_mirrors/un/UnrealPakViewer 作为UE4开发者&#xff0c;你是否曾为Pak文件的…...

编程新知 2026/3/30 8:35:27

Granite TimeSeries FlowState R1实战：基于卷积神经网络（CNN）的时序特征提取进阶

Granite TimeSeries FlowState R1实战&#xff1a;基于卷积神经网络&#xff08;CNN&#xff09;的时序特征提取进阶 你是不是也遇到过这样的问题&#xff1f;面对一长串传感器读数、股票价格波动或者服务器监控数据&#xff0c;感觉信息量巨大&#xff0c;却不知道从哪里入手…...

编程新知 2026/3/30 8:35:27