Jquery - comment faire $.post() utiliser contentType=application/json?

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

voir: jQuery.ajax()

finalement j'ai trouvé la solution, qui fonctionne pour moi:

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 de 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 de" get "et" post " à partir des sources originales de JQuery et en durcissant quelques paramètres pour forcer un POST JSON.

Merci!

utilisation 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 uniquement un exemple de code avec $.vous trouverez un exemple correspondant dans la réponse. Je ne veux pas répéter la même information que vous avez déjà étudiée jusqu'à maintenant: $.poste et $.obtenez des formes courtes de $.Ajax. Utilisez donc $.ajax et vous pouvez utiliser l'ensemble de ses paramètres sans avoir à modifier les paramètres globaux.

au fait, je ne recommande pas de remplacer les $standards.post. C'est mon opinion personnelle , mais pour moi, il 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. Les méthodes standard de réécriture sans avoir une raison très importante peuvent suivre à malentendu dans la lecture du code de programme. Je répète donc encore une fois ma recommandation: utilisez le $original.ajax forme jQuery au lieu de jQuery.get et jQuery.post et vous recevez des programmes qui non seulement fonctionnent parfaitement, mais peuvent être lus par les gens sans aucun malentendu.

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

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 un affichage de formulaire simple. Tu ne l'es pas.

si vous ne voulez vraiment pas basculer, vous pouvez créer votre propre fonction appelée, disons, xpost(), et la faire simplement transformer les paramètres donnés en paramètres pour un appel ajax() jQuery, avec le type de contenu défini. De cette façon, plutôt que de réécrire toutes ces fonctions post() en fonctions ajax (), vous avez juste à les changer toutes de post en xpost (ou n'importe quoi d'autre).

je sais que c'est une réponse tardive, j'ai en fait une méthode de raccourci que j'utilise pour poster/lire à/de services basés MS.. il fonctionne aussi bien avec MVC qu'avec ASMX, etc...

utiliser:

$.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));

NOTE: j'ai aussi un JSON.parseAjax méthode qui est modifié à partir de json.org'fichier JS, qui ajoute à la manipulation de la MS "/Date(...)/" date...

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

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

au cœur de la question Est le fait que JQuery au moment de la rédaction n'a pas une méthode postJSON tandis que getJSON existe et fait la bonne chose.

un postJSON méthode permettrait de faire 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
    });

cette extension simple de L'API jquery (à partir de: https://benjamin-schweizer.de/jquerypostjson.html ) pour $.postJSON () fait l'affaire. Vous pouvez utiliser postJSON() comme tous les autres appels Jquery Ajax natifs. Vous pouvez joindre les gestionnaires d'événements et ainsi de suite.

$.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 les autres API Ajax (comme $http D'AngularJS), il définit le contentType correct à application/json. Vous pouvez passer vos données json (objets javascript) directement, car il obtient stringifié ici. Le type de données retourné attendu est défini à JSON. Vous pouvez joindre 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");
 });

Que Diriez-vous de votre propre adaptateur/Emballage ?

//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 usage 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... }
});

Le documentation à l'heure actuelle montre qu'en 3.0, $.poste accepter les paramètres de l'objet, ce qui signifie que vous pouvez utiliser le $.options ajax. 3.0 n'est pas encore sorti et sur le commettre ils parlent de cacher la référence dans la documentation, mais regarder pour elle dans le futur!

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 Fiddler je pouvais voir la requête avec:

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

en conséquence, mon serveur ne pouvait pas mapper un objet vers un type côté serveur.

après avoir changé la dernière ligne pour celle-ci:

$.post(url, rating, showSavedNotification);

Dans le violon je pouvais encore voir:

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

cependant, le serveur a commencé à retourner ce à quoi je m'attendais.

pour une raison quelconque, définir le type de contenu sur la requête ajax comme @Adrien l'a suggéré n'a pas fonctionné dans mon cas. Cependant, vous pouvez changer le type de contenu en utilisant $.post by de le faire avant:

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

alors faites votre $.post appel:

$.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 à utiliser windows-1252 encodage pour les requêtes ajax.

nous pouvons changer le type de Contenu comme ceci $.post

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

vous ne pouvez pas envoyer application/json directement -- cela doit être un paramètre D'une requête GET/POST.

donc quelque chose comme

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