typescript jsonobject表示 jsonp content-type

转载

lemon 2024-01-17 09:42:56

文章标签 json ajax 服务器 文章分类 TypeScript 前端开发

Content-Type：一般是指网页中存在的Content-Type，用于定义网络文件的类型和网页的编码。在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据。白话点意思就是告诉服务器我传的是什么结构的数据，以便于服务器能够解析和处理。

可以参考Postman的一些截图示例

typescript jsonobject表示 jsonp content-type_ajax

form-data（multipart/form-data）
x-www-form-urlencoded（application/x-www-form-urlencoded）
raw — TEXT (text/plain)

raw — Javascript (application/javascript)
raw — JSON (application/json)
raw — HTML (text/html)
raw — XML (text/xml)

一、form-data

typescript jsonobject表示 jsonp content-type_json_02

这是一个多部分多媒体类型，boundary 用于分割不同的字段。它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来说明文件类型。

上图可以演示为什么叫multipart 以及boundary 作用

特点：这个multipart 设计的很好，所以这个模式下既可以传表单，也可以传文件

二、x-www-form-urlencoded

特点：这个相比上面的form-data 看下图结构就可以看出，这个只能是键值对！！

其中每一个key和value均按照如下规则进行编码:

1、用"+"取代空字符
2、非数字, 字母用%HH格式进行替换, 其中HH是两位16进制数字, 表示被替换字符的ASCII码(例如"?"会被替换成"%3F", 对应十进制数是63, 也就是问号对应的ASCII值)
3、换行符用CR LF字符对表示, 对应的值是"%0D%0A";

typescript jsonobject表示 jsonp content-type_服务器_03

效果

三、raw模式

我理解这个里面的几个对象是为了服务器端获取的时候便于解析，所以才分出来json,text等，其实可以看到请求的内容都是一致的，除了请求头不一样

typescript jsonobject表示 jsonp content-type_json_05

typescript jsonobject表示 jsonp content-type_ajax_06

以上 Content-Type在Ajax里的体现为

$.ajax({
    url: '/',
    method: 'post',
    contentType: 'application/json;charset=utf-8', // 发送的数据类型
    data: { size:"1" },
    dataType:'html',
    success: function (xhr) {
　　　　console.log(2)
    },
　　error:function(){console.log(3)}
})

另一个要补充的是 dataType,看以下截图为上方ajax执行示例，

这个是用于指定告知服务器期望返回的类型，常用的类型有：json、text、script、html、xml，这个值表现为请求头里的accept参数

typescript jsonobject表示 jsonp content-type_json_07