Pass accepts header parameter to jQuery AJAX

JavascriptJquery

Javascript Problem Overview


When I inspect the following code in Chrome Console it shows me a Request header Accept:undefined

jQuery.ajax({
		url: _this.attr('href'),
		accepts: "application/json; charset=utf-8",
		
	});
});

How do I set accept type as JSON. I don't want to set a custom header or use beforeSend

Javascript Solutions


Solution 1 - Javascript

Try this ,

$.ajax({     
  headers: {          
    Accept: "text/plain; charset=utf-8",         
    "Content-Type": "text/plain; charset=utf-8"   
  },
  data: "data",    
  success : function(response) {  
    // ...
  }
});

See this post for reference:

https://stackoverflow.com/questions/1145588/cannot-properly-set-the-accept-http-header-with-jquery

Fixed : Uncaught SyntaxError: missing } after property list

Solution 2 - Javascript

There two alternate ways to set accept header, which are as below:

1) setRequestHeader('Accept','application/json; charset=utf-8');

2) $.ajax({
    dataType: ($.browser.msie) ? "text" : "json",
    accepts: {
        text: "application/json"
    }
});

Solution 3 - Javascript

In recent versions of jQuery, setting "dataType" to an appropriate value also sets the accepts header. For instance, dataType: "json" sets the accept header to Accept: application/json, text/javascript, */*; q=0.01.

Solution 4 - Javascript

The other answers do not answer the actual question, but rather provide workarounds which is a shame because it literally takes 10 seconds to figure out what the correct syntax for accepts parameter.

The accepts parameter takes an object which maps the dataType to the Accept header. In your case you don't need to even need to pass the accepts object, as setting the data type to json should be sufficient. However if you do want to configure a custom Accept header this is what you do:

accepts: {"*": "my custom mime type" },

How do I know? Open jquery's source code and search for "accepts". The very first find tells you all you need to know:

	accepts: {
		"*": allTypes,
		text: "text/plain",
		html: "text/html",
		xml: "application/xml, text/xml",
		json: "application/json, text/javascript"
	},

As you see the are default mappings to text, html, xml and json data types.

Solution 5 - Javascript

Try this:

$.ajax({
        beforeSend: function (xhr){ 
        xhr.setRequestHeader("Content-Type","application/json");
        xhr.setRequestHeader("Accept","text/json");
    }, 
    type: "POST",
    //........
});

Solution 6 - Javascript

Although some of them are correct, I've found quite confusing the previous responses. At the same time, the OP asked for a solution without setting a custom header or using beforeSend, so I've being looking for a clearer explanation. I hope my conclusions provide some light to others.

The code

jQuery.ajax({
    .... 
    accepts: "application/json; charset=utf-8",
    ....
});

doesn't work because accepts must be a PlainObject (not a String) according to the jQuery doc (https://api.jquery.com/jquery.ajax/). Specifically, jQuery expect zero or more key-value pairs relating each dataType with the accepted MIME type for them. So what I've finally using is:

jQuery.ajax({
    ....
    dataType: 'json',
    accepts: {
        json: 'application/json'
    },
    ....
});

Solution 7 - Javascript

You had already identified the accepts parameter as the one you wanted and keyur is right in showing you the correct way to set it, but if you set DataType to "json" then it will automatically set the default value of accepts to the value you want as per the jQuery reference. So all you need is:

jQuery.ajax({
    url: _this.attr('href'),
    dataType: "json"
});

Solution 8 - Javascript

I use jQuery.getJSON( url [, data ] [, success( data, textStatus, jqXHR ) ] ) for example:

var url="my.php";
$.getJSON( url, myObj )
.done(function( json ) { ... }) /* got JSON from server */
.fail(function( jqxhr, textStatus, error ) {
    var err = textStatus + ", " + error;
    console.log( "Failed to obtain JSON data from server: " + err );
  }); /* failed to get JSON */

getJSON is shorthand for:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

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
QuestionaWebDeveloperView Question on Stackoverflow
Solution 1 - JavascriptkarthickView Answer on Stackoverflow
Solution 2 - Javascriptgaurang171View Answer on Stackoverflow
Solution 3 - JavascriptkopporView Answer on Stackoverflow
Solution 4 - JavascriptRoman RoyterView Answer on Stackoverflow
Solution 5 - JavascriptSrinivasView Answer on Stackoverflow
Solution 6 - JavascriptGoogolView Answer on Stackoverflow
Solution 7 - JavascriptNathan PhillipsView Answer on Stackoverflow
Solution 8 - JavascriptiainHView Answer on Stackoverflow