复习HTML(进阶)

前言

上一篇的最后我介绍了在表单中,上传文件需要使用到 method属性 和enctype属性。本篇博客主要是详细的介绍这些知识

html 复制代码
   <form  action="http://localhost:8080/test" method="post"  enctype="multipart/form-data">

method属性

method请求方式有

1 get(默认的请求方式):数据跟在资源路径下(也就是我们在后端使用@RequestMapping, @GetMapping 映射下的初始路径)

如图所示:test? +请求数据(查询参数)

java 复制代码
  @RequestMapping("/test")
    public String ff(User user ,MultipartFile file) {
        System.out.println("user="+user);
        System.out.println("file="+file.getSize());
         return "收到数据";
    }

2 post : 发送的数据在请求体(requestbody)

补充:我们常使用@RequestBody注解 在请求体中招发送的数据

注意:enctype属性 常常和post 搭配使用

举个例:我们上传文件时需要使用enctype属性,是向服务器发送数据

3 get 请求和post请求的区别

1 发送数据位置不同

原因:

上面介绍的。get:数据是跟在路径下的。也就是我们后面要了解的请求行中;post:数据是在请求体中

2 应用场景不同

原因:

1 get:主要是从服务器中,获得数据。;post:主要是向服务器中提交数据。

3 后端接收方式不同

原因:

1 发送get请求时,需要使用@GetMapping注解映射

2 发送post请求时,需要使用@PostMapping注解 映射

4 安全性不同

原因:

1 发送get请求时,请求数据是直接呈现地址栏上,容易被捕捉,安全性方面较弱。

如下图所示:我标红的就是csdn网址中请求数据(该数据使用键值对的方式:k=v)

2 发送post请求时,请求的数据是在request body请求体中,不会在地址栏上显示,安全性比较高然而,需要注意的是,即使使用POST请求,如果不使用HTTPS加密,报文正文仍然是明文传输,可能仍然面临被截获和读取的风险。

enctype属性

作用

在post请求时,指定请求体的数据格式
常见的数据格式如下图所示:

数据格式

含义:发送请求时,数据需要遵循的规则如编码要求等

重点:当我们上传文件时指定数据格式为: multipart/form-data

重点:表单只支持以application/x-www-form-urlencoded 和 multipart/form-data格式发送数据

1 application/x-www-form-urlencoded

注意:

1 get 和post都是默认使用application/x-www-form-urlencoded数据格式

2 编码使用 url编码

url编码:utf-8 +16进制

什么意思呢

如果遇到特殊字符如汉字

步骤

1 先转换成utf-8编码

2 最后使用16进制替换

2 multipart/form-data

注意:

1 使用boundary =123作为分隔符,把多个内容分隔开

2 多个编码形式根据有多少个内容决定

3 application/json

含义

**JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,具有简洁、清晰、易于阅读和编写的特点,同时易于机器解析和生成。**JSON的应用场景非常广泛,

注意:

1 当我们使用json 数据格式时,向服务器发送请求,并传递数据,必须先通过@RequestBody 从请求体中找到对应的数据,并转化成可以被JavaBean识别的形式。

2 当我们需要返回数据时,需要通过@ResponseBody注解方式重新转成json数据格式被前端接受或作用于其他。
特点:使用utf-8 编码,数据采用键值对的方式

典型的应用场景:

  1. Web应用:

    • 在前后端分离架构中,服务器端通过HTTP响应将数据以JSON格式发送给客户端(如浏览器)。
    • 客户端的JavaScript代码可以解析JSON并动态更新网页内容,例如从服务器获取用户信息、商品列表、新闻文章等。
  2. AJAX异步请求:

    • 浏览器使用AJAX技术发起异步请求,服务器返回JSON数据。
    • 无需刷新整个页面即可实现局部内容的动态加载和更新。
  3. RESTful API:

    • JSON是现代API设计的标准数据格式之一,用于规定请求参数和响应数据结构。
    • API使用者通过发送JSON请求到服务器,并接收JSON格式的响应结果。
  4. 数据库:

    • 某些NoSQL数据库(如MongoDB)直接支持JSON作为存储格式。
    • 在关系型数据库中,也常将JSON字符串化后存入特定字段,便于存储半结构化或松散结构的数据。
    • JSON字段在数据库中适用于数据结构动态变化、存储复杂数据类型、存储非关系型数据、减少数据库查询次数、存储元数据以及实现灵活的查询方式等场景。
  5. 本地存储:

    • 浏览器提供的localStorage或IndexedDB等API允许以JSON格式存储用户数据、应用设置等。
    • 便于离线访问或持久化状态。
  6. 应用程序配置:

    • 在软件开发中,JSON常用于编写配置文件。
    • 其清晰的结构和易读性便于开发者管理应用程序的各项设置和参数。
  7. 跨服务通信:

    • 在微服务架构中,JSON常用作RPC调用的数据交换格式。
    • 使得不同服务间能以统一、标准的方式传递复杂数据结构。
  8. 原生/混合移动应用:

    • 通过HTTP请求从服务器获取JSON数据,用于填充移动端界面。
    • 如新闻阅读、社交媒体、电商应用等。

json对象格式:{" 属性名":属性值}

补充:属性值可以是:字符串/数字/true/false/null

HTTP请求

HTTP请求组成

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

以下是get请求示例 和post请求示例

从中,我们可以发现 :

1 get请求数据位于请求行中;post 请求数据位于请求体

2 Content-Type ,Content-Length 表示请求体的数据格式 和请求体的长度

3 在HTTP请求中 请求行和请求头是必须要有的,至于请求体都可以(可有,可不有)

session 原理

含义:session作为一个短暂的存储器

理解:

每当客户端(也就是运行前端代码时)发送请求,使用session对象 记录我们向服务器传递的数据。

同时 当session对象存储我们发送的数据后,也会返回一个特殊的标识(相当于门牌号)JSESSIONID,当我们需要二次使用时,我们可以根据标识来找到我们之前发送的数据。

相关推荐
zach1 小时前
前端落地实战:Next.js 项目 Nginx + PM2 生产部署全流程(附踩坑总结)
前端·pm2·next.js
overmind1 小时前
oeasy教h5前端001 修改的乐趣_直接修改在线网页
前端
只睡四小时1 小时前
JS 手写 D-pad 空间导航:电视端焦点引擎实战
android·开发语言·前端·javascript·ecmascript·hls·空间导航
恋猫de小郭1 小时前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
庄园特聘拆椅狂魔1 小时前
从连连看到粒子消散——前端小游戏与视觉特效的技术选型
前端
JudithHuang2 小时前
React 常用 Hooks
前端·react.js·前端框架
sycmancia3 小时前
Qml——Window元素使用
前端
每天都好困3 小时前
03 AR 投影与误差修正:把地图上的点贴到视频画面上
前端
每天都好困3 小时前
04 地图图层封装:像管理 Photoshop 图层一样管理地图元素
前端
去伪存真3 小时前
构建你的第一个 DevOps AI Agent:自动化捕获、分析并修复 CI 故障
前端·agent