The role of setting contentType: 'application/json' in ajax (graphic tutorial)

This article mainly introduces the function of setting contentType: "application/json" in ajax. Friends who need it can refer to it

When I was doing project interaction recently, I just started to transfer data to the background and returned 415. , later Baidu added contentType: "application/json" and then returned 400, and then changed the transmitted data format to json string and the transmission was successful. Now let's take a look at the role of contentType: "application/json":

After adding contentType: "application/json", the format of data sent to the background must be a json string

$.ajax({
  type: "post",
  url: "mobile/notice/addMessageInfo.jspx",
  contentType: "application/json",
  data:"{'name':'zhangsan','age':'15'}",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(msg) {
    console.log(msg)
  }
})

Do not add contentType: "application/ json", you can send the json object form to the backend

$.ajax({
  type: "post",
  url: "mobile/notice/addMessageInfo.jspx",
  data:{name:'zhangsan',age:'15'},
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(msg) {
    console.log(msg)
  }
})

In addition, when passing complex json to the background, you also need to add contentType: "application/json ", and then convert the data into a string

var data = {
  uploadarray: uploadarray,
  messageInfo: {
    messageTitle: messageTitle,
    messageContent: messageContent,
    publisher: publisher
  },
  userId: userId
}

$.ajax({ 
  type: 'post',
  url: "mobile/notice/addMessageInfo.jspx",
  contentType: 'application/json',
  data: JSON.stringify(data),
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(msg) {
    console.log(msg)
  }
})

Additional: Let’s take a look at the usage of contentType: “application/json” in $.ajax

If you don’t use contentType: “application/json”, data can be an object.

$.ajax({
url: actionurl,
type: "POST",
datType: "JSON",
data: { id: nodeId },
async: false,
success: function () {}
});

If you use contentType: “application/json”, then data can only be a json string

$.ajax({
url: actionurl,
type: "POST",
datType: "JSON",
contentType: "application/json"
data: "{'id': " + nodeId +"}",
async: false,
success: function () {}
});

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Ajax PHP JavaScript MySQL implements a simple non-refresh online chat room

##jQuery Ajax verification user name steps Detailed explanation

Yii2 form event Ajax submission implementation method

The above is the detailed content of The role of setting contentType: 'application/json' in ajax (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!