Jquery - Comment faire pour que $ .post () utilise contentType = application / json?

J'ai remarqué que lors de l'utilisation de $ .post () dans jquery que le contentType par défaut est application / x-www-form-urlencoded - lorsque mon code mvc asp.net doit avoir contentType = application / json

(Voir cette question pour savoir pourquoi je dois utiliser application / json: ASPNET MVC - Pourquoi ModelState.IsValid false "Le champ x est requis" lorsque ce champ a une valeur? )

Comment puis-je faire en sorte que $ .post () envoie contentType = application / json? J'ai déjà un grand nombre de fonctions $ .post (), donc je ne veux pas passer à $ .ajax () car cela prendrait trop de temps

Si j'essaye

$.post(url, data, function(), "json") 

Il a toujours contentType = application / x-www-form-urlencoded. Alors, que fait exactement le paramètre "json" s'il ne change pas le type de contenu en json?

Si j'essaye

$.ajaxSetup({
  contentType: "application/json; charset=utf-8"
});

Cela fonctionne mais affecte tous les $ .get et $ .post que j'ai et provoque la rupture de certains.

Existe-t-il un moyen de changer le comportement de $ .post () pour envoyer contentType = application / json?

Je pense que vous devrez peut-être

1.Modifiez la source pour que $ .post utilise toujours le type de données JSON car il ne s'agit en réalité que d'un raccourci pour un $.ajaxappel préconfiguré

Ou

2. Définissez votre propre fonction utilitaire qui est un raccourci pour la $.ajaxconfiguration que vous souhaitez utiliser

Ou

3.Vous pouvez remplacer le $.post functionpar votre propre implémentation via le patch de singe.

Le type de données JSON dans votre exemple fait référence au type de données renvoyé par le serveur et non au format envoyé au serveur.

$.ajax({
  url:url,
  type:"POST",
  data:data,
  contentType:"application/json; charset=utf-8",
  dataType:"json",
  success: function(){
    ...
  }
})

Voir: jQuery.ajax ()

Enfin, j'ai trouvé la solution qui me convient:

jQuery.ajax ({
    url: myurl,
    type: "POST",
    data: JSON.stringify({data:"test"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(){
        //
    }
});

J'ai fini par ajouter la méthode suivante à jQuery dans mon script:

jQuery["postJSON"] = function( url, data, callback ) {
    // shift arguments if data argument was omitted
    if ( jQuery.isFunction( data ) ) {
        callback = data;
        data = undefined;
    }

    return jQuery.ajax({
        url: url,
        type: "POST",
        contentType:"application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: callback
    });
};

Et pour l'utiliser

$.postJSON('http://url', {data: 'goes', here: 'yey'}, function (data, status, xhr) {
    alert('Nailed it!')
});

Cela a été fait en copiant simplement le code "get" et "post" à partir des sources JQuery d'origine et en codant en dur quelques paramètres pour forcer un POST JSON.

Merci!

utiliser juste

jQuery.ajax ({
    url: myurl,
    type: "POST",
    data: mydata,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(){
        //
    }
});

MISE À JOUR @JK: Si vous écrivez dans votre question un seul exemple de code avec $ .post, vous trouverez un exemple correspondant dans la réponse. Je ne veux pas répéter les mêmes informations que vous avez déjà étudiées jusqu'à présent: $ .post et $ .get sont des formes abrégées de $ .ajax. Il suffit donc d'utiliser $ .ajax et vous pouvez utiliser l'ensemble complet de ses paramètres sans avoir à modifier les paramètres globaux.

Au fait, je ne recommanderais pas d'écraser le $ .post standard. C'est mon opinion personnelle , mais pour moi, c'est important, non seulement que le programme fonctionne, mais aussi que tous ceux qui lisent votre programme le comprennent de la même manière. L'écrasement des méthodes standard sans avoir une raison très importante peut entraîner un malentendu lors de la lecture du code du programme. Je répète donc ma recommandation une fois de plus: utilisez simplement le formulaire original $ .ajax jQuery au lieu de jQuery.getet jQuery.postet vous recevez des programmes qui fonctionnent non seulement parfaitement, mais peuvent être lus par des personnes sans aucun malentendu.

Le type de données "json" que vous pouvez passer comme dernier paramètre à post () indique le type de données que la fonction attend dans la réponse du serveur, pas le type qu'elle envoie dans la demande. Plus précisément, il définit l'en-tête "Accepter".

Honnêtement, votre meilleur pari est de passer à un appel ajax (). La fonction post () est conçue comme une commodité; une version simplifiée de l'appel ajax () pour quand vous faites juste une publication de formulaire simple. Tu ne l'es pas.

Si vous ne voulez vraiment pas changer, vous pouvez créer votre propre fonction appelée, par exemple, xpost (), et la transformer simplement en paramètres pour un appel jQuery ajax (), avec le type de contenu défini. De cette façon, plutôt que de réécrire toutes ces fonctions post () en fonctions ajax (), il vous suffit de les changer de post en xpost (ou autre).

Cette simple extension d'API jquery (à partir de: https://benjamin-schweizer.de/jquerypostjson.html ) pour $ .postJSON () fait l'affaire. Vous pouvez utiliser postJSON () comme tout autre appel Ajax natif jquery. Vous pouvez attacher des gestionnaires d'événements, etc.

$.postJSON = function(url, data, callback) {
  return jQuery.ajax({
    'type': 'POST',
    'url': url,
    'contentType': 'application/json; charset=utf-8',
    'data': JSON.stringify(data),
    'dataType': 'json',
    'success': callback
  });
};

Comme d'autres API Ajax (comme $ http d'AngularJS), il définit le bon contentType sur application / json. Vous pouvez transmettre vos données json (objets javascript) directement, car elles sont ici strictes. Le type de données renvoyé attendu est défini sur JSON. Vous pouvez attacher les gestionnaires d'événements par défaut de jquery pour les promesses, par exemple:

$.postJSON(apiURL, jsonData)
 .fail(function(res) {
   console.error(res.responseText);
 })
 .always(function() {
   console.log("FINISHED ajax post, hide the loading throbber");
 });

Je sais que c'est une réponse tardive, j'ai en fait une méthode de raccourci que j'utilise pour publier / lire vers / depuis les services basés sur MS .. cela fonctionne avec MVC ainsi qu'avec ASMX etc ...

Utilisation:

$.msajax(
  '/services/someservice.asmx/SomeMethod'
  ,{}  /*empty object for nothing, or object to send as Application/JSON */
  ,function(data,jqXHR) {
    //use the data from the response.
  }
  ,function(err,jqXHR) {
    //additional error handling.
  }
);

//sends a json request to an ASMX or WCF service configured to reply to JSON requests.
(function ($) {
  var tries = 0; //IE9 seems to error out the first ajax call sometimes... will retry up to 5 times

  $.msajax = function (url, data, onSuccess, onError) {
    return $.ajax({
      'type': "POST"
      , 'url': url
      , 'contentType': "application/json"
      , 'dataType': "json"
      , 'data': typeof data == "string" ? data : JSON.stringify(data || {})
      ,beforeSend: function(jqXHR) {
        jqXHR.setRequestHeader("X-MicrosoftAjax","Delta=true");
      }
      , 'complete': function(jqXHR, textStatus) {
        handleResponse(jqXHR, textStatus, onSuccess, onError, function(){
          setTimeout(function(){
            $.msajax(url, data, onSuccess, onError);
          }, 100 * tries); //try again
        });
      }
    });
  }

  $.msajax.defaultErrorMessage = "Error retreiving data.";


  function logError(err, errorHandler, jqXHR) {
    tries = 0; //reset counter - handling error response

    //normalize error message
    if (typeof err == "string") err = { 'Message': err };

    if (console && console.debug && console.dir) {
      console.debug("ERROR processing jQuery.msajax request.");
      console.dir({ 'details': { 'error': err, 'jqXHR':jqXHR } });
    }

    try {
      errorHandler(err, jqXHR);
    } catch (e) {}
    return;
  }


  function handleResponse(jqXHR, textStatus, onSuccess, onError, onRetry) {
    var ret = null;
    var reterr = null;
    try {
      //error from jqXHR
      if (textStatus == "error") {
        var errmsg = $.msajax.defaultErrorMessage || "Error retreiving data.";

        //check for error response from the server
        if (jqXHR.status >= 300 && jqXHR.status < 600) {
          return logError( jqXHR.statusText || msg, onError, jqXHR);
        }

        if (tries++ < 5) return onRetry();

        return logError( msg, onError, jqXHR);
      }

      //not an error response, reset try counter
      tries = 0;

      //check for a redirect from server (usually authentication token expiration).
      if (jqXHR.responseText.indexOf("|pageRedirect||") > 0) {
        location.href = decodeURIComponent(jqXHR.responseText.split("|pageRedirect||")[1].split("|")[0]).split('?')[0];
        return;
      }

      //parse response using ajax enabled parser (if available)
      ret = ((JSON && JSON.parseAjax) || $.parseJSON)(jqXHR.responseText);

      //invalid response
      if (!ret) throw jqXHR.responseText;  

      // d property wrap as of .Net 3.5
      if (ret.d) ret = ret.d;

      //has an error
      reterr = (ret && (ret.error || ret.Error)) || null; //specifically returned an "error"

      if (ret && ret.ExceptionType) { //Microsoft Webservice Exception Response
        reterr = ret
      }

    } catch (err) {
      reterr = {
        'Message': $.msajax.defaultErrorMessage || "Error retreiving data."
        ,'debug': err
      }
    }

    //perform final logic outside try/catch, was catching error in onSuccess/onError callbacks
    if (reterr) {
      logError(reterr, onError, jqXHR);
      return;
    }

    onSuccess(ret, jqXHR);
  }

} (jQuery));

REMARQUE: J'ai également une méthode JSON.parseAjax qui est modifiée à partir du fichier JS de json.org, qui ajoute la gestion des dates MS "/Date(...)/" ...

Le fichier json2.js modifié n'est pas inclus, il utilise l'analyseur basé sur un script dans le cas d'IE8, car il y a des cas où l'analyseur natif se casse lorsque vous étendez le prototype du tableau et / ou de l'objet, etc.

J'ai envisagé de réorganiser ce code pour implémenter les interfaces promises, mais cela a très bien fonctionné pour moi.

Au cœur du problème se trouve le fait que JQuery au moment de la rédaction n'a pas de méthode postJSON alors que getJSON existe et fait la bonne chose.

une méthode postJSON ferait ce qui suit:

postJSON = function(url,data){
    return $.ajax({url:url,data:JSON.stringify(data),type:'POST', contentType:'application/json'});
};

et peut être utilisé comme ceci:

postJSON( 'path/to/server', my_JS_Object_or_Array )
    .done(function (data) {
        //do something useful with server returned data
        console.log(data);
    })
    .fail(function (response, status) {
        //handle error response
    })
    .always(function(){  
      //do something useful in either case
      //like remove the spinner
    });

La documentation montre actuellement qu'à partir de la version 3.0, $ .post acceptera l'objet settings, ce qui signifie que vous pouvez utiliser les options $ .ajax. 3.0 n'est pas encore sorti et sur le commit ils parlent de cacher la référence dans les documents, mais cherchez-le à l'avenir!

J'ai eu un problème similaire avec le code JavaScript suivant:

var url = 'http://my-host-name.com/api/Rating';

var rating = { 
  value: 5,
  maxValue: 10
};

$.post(url, JSON.stringify(rating), showSavedNotification);

Où dans le violoniste je pouvais voir la demande avec:

• Entête: Content-Type: application/x-www-form-urlencoded; charset=UTF-8
• Corps: {"value":"5","maxValue":"5"}

Par conséquent, mon serveur n'a pas pu mapper un objet sur un type côté serveur.

Après avoir changé la dernière ligne en celle-ci:

$.post(url, rating, showSavedNotification);

Dans le Fiddler, je pouvais encore voir:

• Entête: Content-Type: application/x-www-form-urlencoded; charset=UTF-8
• Corps: value=5&maxValue=10

Cependant, le serveur a commencé à renvoyer ce que j'attendais.

Que diriez-vous de votre propre adaptateur / wrapper?

//adapter.js
var adapter = (function() {

return {

    post: function (url, params) {
        adapter.ajax(url, "post", params);
        },
    get: function (url, params) {
        adapter.ajax(url, "get", params);
    },
    put: function (url, params) {
        adapter.ajax(url, "put", params);
    },
    delete: function (url, params) {
        adapter.ajax(url, "delete", params);
    },
    ajax: function (url, type, params) {
        var ajaxOptions = {
            type: type.toUpperCase(),
            url: url,
            success: function (data, status) {
                var msgType = "";
                // checkStatus here if you haven't include data.success = true in your
                // response object
                if ((params.checkStatus && status) || 
                   (data.success && data.success == true)) {
                            msgType = "success";
                            params.onSuccess && params.onSuccess(data);
                    } else {
                            msgType = "danger";
                            params.onError && params.onError(data);
                    }
            },
            error: function (xhr) {
                    params.onXHRError && params.onXHRError();
                    //api.showNotificationWindow(xhr.statusText, "danger");
            }
        };
        if (params.data) ajaxOptions.data = params.data;
        if (api.isJSON(params.data)) {
            ajaxOptions.contentType = "application/json; charset=utf-8";
            ajaxOptions.dataType = "json";
        }
        $.ajax($.extend(ajaxOptions, params.options));
    }
})();

    //api.js
var api = {
  return {
    isJSON: function (json) {
        try {
            var o = JSON.parse(json);
            if (o && typeof o === "object" && o !== null) return true;
        } catch (e) {}
        return false;
    }
  }
})();

Et une utilisation extrêmement simple:

adapter.post("where/to/go", {
    data: JSON.stringify(params),
    onSuccess: function (data) {
        //on success response...
    }
    //, onError: function(data) {  //on error response... }
    //, onXHRError: function(xhr) {  //on XHR error response... }
});

Pour une raison quelconque, la définition du type de contenu sur la demande ajax comme l'a suggéré @Adrien n'a pas fonctionné dans mon cas. Cependant, vous pouvez réellement changer le type de contenu à l'aide de $ .post en procédant comme suit avant:

$.ajaxSetup({
    'beforeSend' : function(xhr) {
        xhr.overrideMimeType('application/json; charset=utf-8');
    },
});

Faites ensuite votre $.postappel:

$.post(url, data, function(), "json")

J'ai eu des problèmes avec jQuery + IIS, et c'était la seule solution qui a aidé jQuery à comprendre l'utilisation du codage windows-1252 pour les requêtes ajax.

nous pouvons changer le type de contenu comme ceci dans $ .post

$ .post (url, data, function (data, status, xhr) {xhr.setRequestHeader ("Content-type", "application / x-www-form-urlencoded; charset = utf-8");});

$ .post ne fonctionne pas si vous avez un problème CORS (Cross Origin Resource Sharing). Essayez d'utiliser $ .Ajax au format suivant: "$ .ajax ({url: someurl, contentType: 'application / json', data: requestInJSONFormat, en- têtes: {'Access-Control-Allow-Origin': '*'}, dataType: 'json', type: 'POST', async: false, success: function (Data) {...}}); "

Vous ne pouvez pas envoyer application/jsondirectement - cela doit être un paramètre d'une demande GET / POST.

Donc quelque chose comme

$.post(url, {json: "...json..."}, function());