ajax之Content-Type示例

已于 2022-12-17 08:16:22 修改
阅读量1.8k 收藏 2
点赞数 1
分类专栏： # JS 文章标签： javascript ajax
于 2022-11-26 17:26:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feyehong/article/details/128054083
版权

参考资料:

  1. Content-Type详解
  2. 【SpringBoot】SpringBoot接收请求的n种姿势
  3. Http中的Content-Type详解
  4. HTTP Content-type常用对照表

目录

前期准备

⏹html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <form id="form" action="/test15/receiveRequest" method="post">
             <label for="name">姓名</label><input id="name" type="text" name="name" value="贾飞天" /><br>
             <label for="hobby">爱好</label><input id="hobby" type="checkbox" name="hobby" checked="checked" /><br>
             <label for="address">地址</label><select id="address" name="address">
                <option value="1">山东省</option>
                <option value="2">广东省</option>
                <option value="3">广西省</option>
            </select>
            <button>表单方式提交</button>
        </form>
        <button id="ajax-submit">Ajax方式提交</button>
    </div>
</body>
<script type="text/javascript" th:src="@{/js/public/jquery-3.6.0.min.js}"></script>
</html>

⏹JS

// 工具函数,将form表单转换为json数据
const serialize = (formEle) => Array.from(new FormData(formEle)).reduce((p, [k, v]) => Object.assign({}, p, { [k]: p[k] ? (Array.isArray(p[k]) ? p[k] : [p[k]]).concat(v) : v }), {});

// 后台url
const url = "/test15/receiveRequest";

⏹form

import lombok.Data;

@Data
public class Test15Form {

    private String name;

    private String hobby;

    private String address;
}

⏹controller

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequestMapping("/test15")
public class Test15Controller {

	// XXX省略init方法XXX

    @PostMapping("/receiveRequest")
    @ResponseBody
    public void receiveRequest(Test15Form form) {

        System.out.println(form);
    }
}

0. Content-Type概念解释

在HTTP协议消息头中，使用Content-Type来表示媒体类型信息。它被用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析html或仅仅展示一个文本等。

Post请求的内容放置在请求体中，Content-Type定义了请求体的编码格式。数据发送出去后，还需要接收端解析才可以。接收端依靠请求头中的Content-Type字段来获知请求体的编码格式，最后再进行解析。

⏹常见的Content-Type有如下三种 :

1. application/x-www-form-urlencoded

  • 浏览器原生的form表单类型，或者说是表单默认的类型。
  • jQuery的ajax不指定contentType的话，默认就是application/x-www-form-urlencoded
  • Spring直接使用表单对应的实体类接收即可，不需要@RequestBody注解

1.1 form表单示例

后台controller接收，直接使用和Form表单对应的实体类接收即可

@PostMapping("/receiveRequest")
@ResponseBody
public void receiveRequest(Test15Form form) {

    System.out.println(form);
}

在这里插入图片描述
在这里插入图片描述

1.2 jQuery的ajax示例

$("#ajax-submit").click(function() {
	
	// 将表单转换为对象
    const jsonData = serialize($("#form").get(0));

    $.ajax({
        url: url,
        type: 'POST',
        // 直接提交对象
        data: jsonData,
        // 指定contentType类型
        // 注意: 如果将此代码注释掉，不指定contentType
        // 默认就是application/x-www-form-urlencoded类型
        contentType: 'application/x-www-form-urlencoded',
        success: function (data, status, xhr) {
            console.log(data);
        }
    });
});

在这里插入图片描述

2. application/json

  • ⏹如今大部分的请求都会以json形式进行传输，post会将序列化后的json字符串直接塞进请求体中。
  • ⏹contentType: 'application/json;charset=utf-8'与@RequestBody注解对应,Spring需要使用@RequestBody注解,来将请求体中的json字符串转化为java对象
$("#ajax-submit").click(function() {

    const jsonData = serialize($("#form").get(0));

    $.ajax({
        url: url,
        type: 'POST',
        // 对象转换为json字符串
        data: JSON.stringify(jsonData),
        // 指定发送的是json字符串
        contentType: 'application/json;charset=utf-8',
        success: function (data, status, xhr) {
            console.log(data);
        }
    });
});

在这里插入图片描述
在这里插入图片描述

2.1 指定contentType为json,不使用@RequestBody接收

  • ⏹无法接收到数据

在这里插入图片描述

2.2 不指定contentType,使用@RequestBody接收

  • 报错: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported

⏹前台

$.ajax({
    url: url,
    type: 'POST',
    // 对象转换为json字符串
    data: JSON.stringify(jsonData),
    // 省略了contentType
    success: function (data, status, xhr) {
        console.log(data);
    }
});

⏹后台

@PostMapping("/receiveRequest")
@ResponseBody
public void receiveRequest(@RequestBody Test15Form form) {

    System.out.println(form);
}

⏹效果

在这里插入图片描述

3. multipart/form-data

  • 用于在表单中上传文件，将文件和表单数据共通提交到后台
  • 因为不是application/json，所以无法使用@RequestBody注解接收
  • jQuery的contentType不能设置为multipart/form-data，需要设置为false

⏹前台-html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <form id="form">
        
            <label for="name">姓名</label><input id="name" type="text" name="name" value="贾飞天" /><br>
            <label for="hobby">爱好</label><input id="hobby" type="checkbox" name="hobby" checked="checked" /><br>
            <label for="address">地址</label>
            <select id="address" name="address">
                <option value="1">山东省</option>
                <option value="2">广东省</option>
                <option value="3">广西省</option>
            </select><br>
			
			<!-- 两个文件上传框的name相同,可以将两个文件作为一组封装到一个List中 -->
            <input type="file" name="fileList">
            <input type="file" name="fileList">
            
        </form>
        <button id="ajax-submit">Ajax方式提交</button>
    </div>
</body>
<script type="text/javascript" th:src="@{/js/public/jquery-3.6.0.min.js}"></script>
</html>

⏹前台-JS

const url = "/test15/receiveRequest";

$("#ajax-submit").click(function() {
	
	// 使用FormData来获取表单中的数据
    const formData = new FormData($("#form").get(0));
    
    $.ajax({
        url: url,
        type: 'POST',
        // 注意提交的不是表单对象，而是FormData对象
        data: formData,
        /*
        	告诉jQuery不要去设置Content-Type请求头
        	FormDate对象是XMLHttpRquest2的类型,利用XHR对象发送FormDate生成的数据时,可以直接发送,不需要设置头部,
        	XHR对象能够会自动识别数据类型是FormDate的实例,并配置相关的头部.
		*/
        contentType: false,
        /*
           	jQuery的ajax()方法发送的数据默认是序列化后的字符串,因此processData的值默认为true
           	我们要同时传输文件和表单数据，所以将contentType设置为false,告诉jQuery不要将要发送的数据处理为字符串
		*/
	    processData: false,
        success: function (data, status, xhr) {
            console.log(data);
        }
    });
});

⏹前台-form

import java.util.List;

@Data
public class Test15Form {

    private String name;

    private String hobby;

    private String address;

    private List<MultipartFile> fileList;
}

在这里插入图片描述
在这里插入图片描述

fengyehongWorld
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
聊聊ajax中contentType
爱琴孩的博客
12-09 1万+
前言 contentType属性，想必大家在日常开发中经常用到，但是大家可能对于contentType了解的不是很透彻，这里来和大家一起总结下。 contentType是干嘛滴 contentType 主要设置你发送给服务器的格式，服务端根据前端设置的contentType 来解析前端的数据。关于http请求中的一些小知识点可以大致总结如下（巩固基础） （1）、HTTP 协议是以 ASCI...
Ajax请求中Content-Type的几种类型
mrhanzhou5273的博客
11-26 9380
HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。 1. 表单格式 form的enctype属性可以用于指定编码方式，常用有两种表单编码方式（即contentType的两种取值）： applica
如何在ajax中设置contentType,contentType常见的几种情况
qq_34462698的博客
01-25 1万+
最近在开发中遇到ajax提交参数，后台无法获取到参数的问题,先整理下ajax的几种常见属性 1 .contentType常见的几种情况 application/json; charset=utf-8 要求data必须是json串 "text/html" 对于html "text/xml " 对于xml application/x-www-form-urlencoded (默认值) 使用contentType时候要求data数据相对应,contentType同时里面可以设置数据的编码方式 2. ajax
Ajax 请求头中常见content-type
AP0906424的博客
06-28 1034
四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输，建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分：状态行、请求头、消息主体。协议规定 POST 提交的数据必须放在消息主体（entity-body）中，但协议并没有规定数据必须使用什么编码方式。实际上，开发者完全可以自己决定消息主体的格式，只要最后发送的 HTTP 请求满足上面的格式就可以。 但是，数据发送出去，还要服务端解析成功才有意义。一般服务端语言如 php、python 等，以及它们的 fr
Ajax学习：Ajax设置请求头信息
weixin_47295886的博客
11-28 9076
设置请求头部分：前端工作人员setRequestHeader设置请求头信息，一般将身份校验的信息放在头信息中，传递给服务器，服务器的对参数进行提取，对用户的身份做校验。这时候会预检请求会校验 前端会再发一个请求 所以post接收不了 需要变成all。可以在服务器端使用Access-Control-Allow-Headers。会报错 ，因为不是预定义的请求头 ，浏览器有安全机制。请求报文的：请求行可以设置，请求体可以设置。下面是设置请求头信息。
前端开源库-content-type-mime
08-30
在前端开发中，Content-Type常用于设置Ajax请求的Content-Type头，这决定了发送的数据格式。例如，"application/x-www-form-urlencoded"用于普通表单提交，"multipart/form-data"适用于包含文件上传的表单，而...
Ajax调用SOAP-Web示例
05-17
4. **设置请求头**：对于SOAP请求，我们需要设置Content-Type为'text/xml'或'application/soap+xml'，表明我们发送的数据格式。 5. **构造SOAP请求消息**：创建一个符合SOAP规范的XML字符串，包括SOAP Envelope、...
Ajax---challenge
07-07
xhr.setRequestHeader('Content-Type', 'application/json'); ``` 3. **发送请求** ```javascript xhr.send(); ``` 4. **监听和处理响应** ```javascript xhr.onreadystatechange = function() { if (xhr....
ThinkPHP框架结合Ajax实现用户名校验功能示例
01-20
本文实例讲述了ThinkPHP框架结合Ajax实现用户名校验功能。分享给大家供大家参考，具体...meta http-equiv=Content-Type content=text/html; charset=UTF-8 /> <title>Untitled Document</title> <scr
jQuery使用ajax传递json对象到服务端及contentType的用法示例
11-21
本文实例讲述了jQuery使用... type: 'post', data: { name: "admin", age: 10 }, dataType: 'text', success: function (data) { alert(data); } }) 0.2 服务端代码： public void ProcessRequest(H
ajax提交字符串content-type,HTTP请求头的Content-Type字段
weixin_35726575的博客
08-05 461
请求中的Content-Type在请求中 (如POST 或 PUT)，Content-Type字段用于客户端告诉服务器实际发送的数据类型。当你发送一个HTTP的POST请求时，需要设置请求头中的Content-Type字段，告诉服务端你发送的数据是什么类型的。设置请求头中的Content-Type当客户端向服务端发起HTTP的POST请求时，需要告诉服务端，我们发送的数据类型，方便服务端去解析数据...
ajax中的属性Content-Type
qq_42724600的博客
09-22 474
https://www.cnblogs.com/tugenhua0707/p/8975121.html
ajax content-Type注意事项
遇见一个人流泪的博客
12-14 7549
content-Type定义的是发送至服务器的数据类型，data-Type定义的是服务器返回的数据类型。 如果不指定 ContentType，默认为text/html，表单数据默认为application/x-www-form-urlencoded。我一般习惯将其设为application/json。 需要注意的是： 如果使用的是get方式，那么以上三种做法都是可以的，因为ge
$.ajax 中的contentType
gz-郭小敏的博客
01-10 216
之前一直没有留意这个属性，然后项目中突然发现同一个请求，传参和不传参的contentType不同。 先看看jquery文档中的$.ajax： contentType属性 类型：String 默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。 然而 application/x-www-form-urlencoded 这种形式可...
关于 ajax Content-Type 的问题 贼拉有用的!!!
菲你莫属的博客
12-19 5102
contentType: “application/json”
（转载）四种常见的 POST 提交数据方式
weixin_30737363的博客
09-25 4379
（转载）http://www.imququ.com/post/four-ways-to-post-data-in-http.html HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 这几种。其中 POST 一般用来向服务端提交数据，本文主要讨论 POST 提交数据的几种方式。 我们知道，HTTP ...
AJAX请求头Content-type
热门推荐
不可思议
04-21 3万+
setRequestHeader Content-type 使用
ajax设置Content-Type
最新发布
09-15
在使用Ajax发送请求时，可以使用`setRequestHeader`方法来设置`Content-Type`头部字段。以下是一个示例代码： ```javascript var xhr = new XMLHttpRequest(); xhr.open("POST", "your-url", true); xhr.setRequestHeader("Content-Type", "application/json"); // 设置Content-Type为application/json xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功的处理逻辑 console.log(xhr.responseText); } }; xhr.send(JSON.stringify({data: "your-data"})); ``` 在上面的例子中，`setRequestHeader`方法用于设置`Content-Type`为`application/json`，表示请求体中的数据是JSON格式的。你可以根据自己的需求设置不同的`Content-Type`值，比如`application/x-www-form-urlencoded`表示请求体中的数据是URL编码格式的。 请注意，`setRequestHeader`方法应该在`open`方法之后、`send`方法之前调用，以确保请求头部字段正确设置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值