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

HTTP前端请求

news 2026/2/6 13:47:45

目录

    • 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

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2026/1/30 16:24:23

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2026/2/1 19:34:23