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

相关推荐
GIS程序媛—椰子8 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00114 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端17 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100921 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439131 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt