复习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,当我们需要二次使用时,我们可以根据标识来找到我们之前发送的数据。

相关推荐
小旋风012341 分钟前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
热爱编程的小曾23 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin35 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox