What is content-type and datatype in an AJAX request?

Jquery

Jquery Problem Overview


What is content-type and datatype in a POST request? Suppose I have this:

$.ajax({
	type : "POST",
	url : /v1/user,
	datatype : "application/json",
	contentType: "text/plain",
	success : function() {
		
	},
	error : function(error) {
		
	},

Is contentType what we send? So what we send in the example above is JSON and what we receive is plain text? I don't really understand.

Jquery Solutions


Solution 1 - Jquery

contentType is the type of data you're sending, so application/json; charset=utf-8 is a common one, as is application/x-www-form-urlencoded; charset=UTF-8, which is the default.

dataType is what you're expecting back from the server: json, html, text, etc. jQuery will use this to figure out how to populate the success function's parameter.

If you're posting something like:

{"name":"John Doe"}

and expecting back:

{"success":true}

Then you should have:

var data = {"name":"John Doe"}
$.ajax({
    dataType : "json",
    contentType: "application/json; charset=utf-8",
    data : JSON.stringify(data),
    success : function(result) {
        alert(result.success); // result is an object which is created from the returned JSON
    },
});

If you're expecting the following:

<div>SUCCESS!!!</div>

Then you should do:

var data = {"name":"John Doe"}
$.ajax({
    dataType : "html",
    contentType: "application/json; charset=utf-8",
    data : JSON.stringify(data),
    success : function(result) {
        jQuery("#someContainer").html(result); // result is the HTML text
    },
});

One more - if you want to post:

name=John&age=34

Then don't stringify the data, and do:

var data = {"name":"John", "age": 34}
$.ajax({
    dataType : "html",
    contentType: "application/x-www-form-urlencoded; charset=UTF-8", // this is the default value, so it's optional
    data : data,
    success : function(result) {
        jQuery("#someContainer").html(result); // result is the HTML text
    },
});

Solution 2 - Jquery

From the jQuery documentation - http://api.jquery.com/jQuery.ajax/

> contentType When sending data to the server, use this content type. > > dataType The type of data that you're expecting back from the server. If none is specified, jQuery will try to infer it based on the > MIME type of the response > > "text": A plain text string.

So you want contentType to be application/json and dataType to be text:

$.ajax({
    type : "POST",
    url : /v1/user,
    dataType : "text",
    contentType: "application/json",
    data : dataAttribute,
    success : function() {

    },
    error : function(error) {

    }
});

Solution 3 - Jquery

See http://api.jquery.com/jQuery.ajax/, there's mention of datatype and contentType there.

They are both used in the request to the server so the server knows what kind of data to receive/send.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser2759697View Question on Stackoverflow
Solution 1 - JqueryJoe EnosView Answer on Stackoverflow
Solution 2 - JqueryRichard DaltonView Answer on Stackoverflow
Solution 3 - JqueryJonoView Answer on Stackoverflow