ODataContentTypeException : Content Type 'application/json;odata=verbose'

Question

I'm trying to create items in a SharePoint lists through the SharePoint REST API in Javascript (with an AJAX call using jQuery), all that in a SharePoint2013-hosted App.

But I get this error when I execute the ajax query to create an item in the list 'Eleves' (which is printed by this line : alert(JSON.stringify(err)); ) :

{"readyState":4,"responseText":"{\"error\":{\"code\":\"-1, Microsoft.Data.OData.ODataContentTypeException\",\"message\":{\"lang\":\"en-US\",\"value\":\"A supported MIME type could not be found that matches the content type of the response. None of the supported type(s) 'application/atom+xml;type=entry, application/atom+xml, application/json;odata=verbose' matches the content type 'application/json'.\"}}}","status":400,"statusText":"Bad Request"}

Thus the error is :

A supported MIME type could not be found that matches the content type of the response. None of the supported type(s) 'application/atom+xml;type=entry, application/atom+xml, application/json;odata=verbose' matches the content type 'application/json'.

Here is the ajax query code :

$.ajax({
    url: _spPageContextInfo.webServerRelativeUrl +
            "/_api/web/lists/getByTitle('Eleves')/items",
    type: "POST",
    data: JSON.stringify(
        {
            '__metadata': {
                'type': 'SP.Data.ElevesListItem'
            },
            'Nom': nom,
            'Prenom': prenom,
            'EcoleID': ecoleID
        }),
    headers: {
        "accept": "application/json;odata=verbose",
        "X-RequestDigest": $("#__REQUESTDIGEST").val()
    },
    success: function () {
        readAll();;
    },
    error: function (err) {
        alert(JSON.stringify(err));
    }
});

But when I try to read the items in the same list through an AJAX query, it works without a problem (note that the content type is the same).

$.ajax(
    {
        url: _spPageContextInfo.webServerRelativeUrl +
            "/_api/web/lists/getByTitle('Eleves')/items/" +
            "?$select=ID,Nom,Prenom,EcoleID" +
            "&$orderby=Nom,Prenom",
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            readAllSuccess(data);
        },
        error: function (err) {
            alert(JSON.stringify(err));
        }
    }
);

Thanks a lot for your time and your assistance !

In case of, here is the complete App.js code.

/// <reference path="jquery-1.8.2.intellisense.js" />
'use strict';

var Infodidac = window.Infodidac || {};
Infodidac.ElevesList = function () {

    //private members
    var createItem = function (nom, prenom, ecoleID) {
        $.ajax({
            url: _spPageContextInfo.webServerRelativeUrl +
                    "/_api/web/lists/getByTitle('Eleves')/items",
            type: "POST",
            data: JSON.stringify(
                {
                    '__metadata': {
                        'type': 'SP.Data.ElevesListItem'
                    },
                    'Nom': nom,
                    'Prenom': prenom,
                    'EcoleID': ecoleID
                }),
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function () {
                readAll();;
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        });
    },
    readAll = function () {
        $.ajax(
            {
                url: _spPageContextInfo.webServerRelativeUrl +
                    "/_api/web/lists/getByTitle('Eleves')/items/" +
                    "?$select=ID,Nom,Prenom,EcoleID" +
                    "&$orderby=Nom,Prenom",
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                },
                success: function (data) {
                    readAllSuccess(data);
                },
                error: function (err) {
                    alert(JSON.stringify(err));
                }
            }
        );
    },
    readAllSuccess = function (data) {
        var html = [];
        html.push("<table><thead><tr><th>ID</th><th>Nom</th>" +
                  "<th>Prenom</th><th>EcoleID</th></tr></thead>");

        var results = data.d.results;

        for (var i = 0; i < results.length; i++) {
            html.push("<tr><td>");
            html.push(results[i].ID);
            html.push("</td><td>");
            html.push(results[i].Nom);
            html.push("</td><td>");
            html.push(results[i].Prenom);
            html.push("</td><td>");
            html.push(results[i].EcoleID);
            html.push("</td></tr>");
        }
        html.push("</table>");
        $('#eleves').html(html.join(''));
    },
    updateItem = function (id, nom, prenom, ecoleId) {
    },
    removeItem = function (id) {
    }

    //public interface
    return {
        createContact: createItem,
        updateContact: updateItem,
        deleteContact: removeItem,
        printAll: readAll
    }
}();

$(document).ready(function () {
    Infodidac.ElevesList.printAll();
    Infodidac.ElevesList.createContact("Cox", "Brian", "1");
    Infodidac.ElevesList.updateContact(1, "Cox", "Brian", "2");
    Infodidac.ElevesList.deleteContact(1)
});

Answer 1

Does it help if you set the ContentType parameter of your post like:

$.ajax({
            url: _spPageContextInfo.webServerRelativeUrl +
                    "/_api/web/lists/getByTitle('Eleves')/items",
            type: "POST",
            contentType : "application/json;odata=verbose",
            data: JSON.stringify(
                {
                    '__metadata': {
                        'type': 'SP.Data.ElevesListItem'
                    },
                    'Nom': nom,
                    'Prenom': prenom,
                    'EcoleID': ecoleID
                }),
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": $("#__REQUESTDIGEST").val()
            },
            success: function () {
                readAll();;
            },
            error: function (err) {
                alert(JSON.stringify(err));
            }
        });

since just setting the accept header will not do the trick, it will just tell SharePoint that you want to receive json, not that you are sending json