js-jquery-ajax：Content-Type,Accept,(dataType)的区别（原生js发送get与post请求）

追逐梦想永不停

已于 2023-05-12 16:43:21 修改

阅读量3.3k

点赞数 2

分类专栏： java常用方法文章标签： ajax js json

于 2020-10-16 13:15:13 首次发布

本文链接：https://blog.csdn.net/BHSZZY/article/details/109110797

版权

java常用方法专栏收录该内容

9 篇文章

订阅专栏

区别：

1.Content-Type: 是http请求头中的字段，用来告诉服务器，我要发什么类型的数据。

如果不设置，默认为：【Content-Type:application/x-www-form-urlencoded; charset=UTF-8】

ajax中，设置contentType，在实际发送请求时，就会处理成Content-Type。

例子如下：

$.ajax({
  url:"https://www.baidu.com",
  type:"POST",
  data:"{'a':'1','b':'2'}",
  contentType:"application/json;charset=utf-8",
  success: function (data) {
    console.log(data);
  }
});

发送后的请求头截图：

要注意，例子中的contentType不能写成【ContentType或Content-Type等】，否则没有效果。

2.Accept：是http请求头中的字段，告诉服务器，能接受什么类型。

如果不设置，默认为：【Accept: */*】

(1)ajax中，设置dataType，在实际发送请求时，就会处理成Accept。

例：

$.ajax({
  url:"https://www.baidu.com",
  type:"GET",
  dataType:"json",
  success: function (data) {
    console.log(data);
  }
});

发送后的请求头截图：

(2)如果想自定义jquery中没有的accept内容，可以手动设置 accepts 属性，使用键值对存储，然后再设置 dataType 属性为刚刚自定义的键，例如：

$.ajax({
  url:"https://www.baidu.com",
  accepts:{"abc":"application/xxx"},
  dataType:"abc",
  type:"GET",
  success: function (data) {
    console.log(data);
  }
});

发送后的请求头截图：

(3)也可以直接设置请求头，例：

$.ajax({
  url:"https://www.baidu.com",
  type:"POST",
  data:"{'a':'1','b':'2'}",
  headers: { "Accept": "json",   
             "Content-Type":"application/json1;charset=utf-8",
             "content-Type":"application/json2;charset=utf-8",
             "contentType":"application/json3;charset=utf-8",
             "ContentType":"application/json4;charset=utf-8",
             "Contenttype":"application/json5;charset=utf-8",
             "c":"cba"
  
  },
  success: function (data) {
    console.log(data);
  }
});

发送后的请求头截图：

注意，上方不是一个标准的请求，只是一个例子，可以看到：

●Accept可以自定义设置值（其它标签也类似）

●Content-Type不区分大小写，按照最后设置的一个为准（准确描述见第四点）

●可以增加自定义请求头，例如c

●如果请求头中有配置重复，key以第一个为准，后续的不区分大小写并忽略(只选择了第一个：contentType)；但是对应的value会选择最后一个(json5)

●contentType是自定义的请求头(没啥用)，Content-Type才是正确的名称

3.dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。

注意，这个是ajax的属性，而不是http请求头中的字段。

ajax中，设置dataType，在实际发送请求时，会处理成Accept，使用方法在上方。

补充：

1.如果发送请求的Content-Type与服务器可以处理的类型不同，会报错：415（Unsupported Media Type，不支持的媒体类型）

2.如果服务器返回的类型与js发起请求时指定的dataType不同，会报错：406（浏览器接收的响应类型和服务器返回的响应类型不匹配）

3.如果没有jquery.js，下面是使用原生js发送get与post请求的方法：

(1)发送get请求：

var url= "www.baidu.com";
var request = new XMLHttpRequest();
request.onload = function() {
  if (request.status == 200){
      console.log(request.responseText);
  }
}
request.open("GET",url);
//设置请求头必须在open与send之间
request.setRequestHeader("testParams", "test");
request.send(null);

(2)发送post请求：

var url= "www.baidu.com";
var request = new XMLHttpRequest();
request.onload = function() {
  if (request.status == 200){
      console.log(request.responseText);
  }
}
request.open("POST",url);
//设置请求头必须在open与send之间
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//var test_json={"test":"1"};
//这个才行，上面好像不太行
var test_json="\{\"test\":\"1\"\}";
//request.send("id=1");
request.send(test_json);