Impossible de définir le type de contenu sur 'application / json' dans jQuery.ajax

Quand j'ai ce code

$.ajax({
    type: 'POST',
    //contentType: "application/json",
    url: 'http://localhost:16329/Hello',
    data: { name: 'norm' },
    dataType: 'json'
});

dans Fiddler, je peux voir la requête brute suivante

POST http://localhost:16329/Hello HTTP/1.1
Host: localhost:16329
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: application/json, text/javascript, */*; q=0.01
Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://localhost:14693/WebSite1/index.html
Content-Length: 9
Origin: http://localhost:14693
Pragma: no-cache
Cache-Control: no-cache

name=norm

Mais ce que j'essaye, c'est de définir le type de contenu depuis application / x-www-form-urlencoded vers application / json . Mais ce code

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: 'http://localhost:16329/Hello',
    data: { name: 'norm' },
    dataType: "json"
});

Génère une requête étrange (que je peux voir dans Fiddler)

OPTIONS http://localhost:16329/Hello HTTP/1.1
Host: localhost:16329
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:10.0.2) Gecko/20100101 Firefox/10.0.2
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: ru-ru,ru;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Connection: keep-alive
Origin: http://localhost:14693
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Pragma: no-cache
Cache-Control: no-cache

Pourquoi donc? Quelles sont les OPTIONS alors qu'il devrait y avoir POST? Et où mon type de contenu est-il défini sur application / json? Et les paramètres de demande ont disparu pour une raison quelconque.

MISE À JOUR 1

Du côté du serveur, j'ai un service RESTful très simple.

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class RestfulService : IRestfulService
{
    [WebInvoke(
        Method = "POST",
        UriTemplate = "Hello",
        ResponseFormat = WebMessageFormat.Json)]
    public string HelloWorld(string name)
    {
        return "hello, " + name;
    }
}

Mais pour une raison quelconque, je ne peux pas appeler cette méthode avec des paramètres.

MISE À JOUR 2

Désolé de ne pas avoir répondu si longtemps.

J'ai ajouté ces en-têtes à la réponse de mon serveur

 Access-Control-Allow-Origin: *
 Access-Control-Allow-Headers: Content-Type
 Access-Control-Allow-Methods: POST, GET, OPTIONS

Cela n'a pas aidé, j'ai une erreur de méthode non autorisée du serveur.

Voici ce que dit mon violoneux

Donc, maintenant je peux être sûr que mon serveur accepte POST, GET, OPTIONS (si les en-têtes de réponse fonctionnent comme prévu). Mais pourquoi "Méthode non autorisée"?

Dans la réponse WebView du serveur (vous pouvez voir la réponse brute sur l'image ci-dessus) ressemble à ceci

Il semblerait que la suppression http://de l'option url garantit l'envoi de l'en-tête HTTP POST correct.

Je ne pense pas que vous ayez besoin de qualifier complètement le nom de l'hôte, utilisez simplement une URL relative comme ci-dessous.

   $.ajax({
      type: "POST",
      contentType: "application/json",
      url: '/Hello',
      data: { name: 'norm' },
      dataType: "json"
   });

Un exemple du mien qui fonctionne:

        $.ajax({
            type: "POST",
            url: siteRoot + "api/SpaceGame/AddPlayer",
            async: false,
            data: JSON.stringify({ Name: playersShip.name, Credits: playersShip.credits }),
            contentType: "application/json",
            complete: function (data) {
            console.log(data);
            wait = false;
        }
    });

Peut-être lié: jQuery $ .ajax (), $ .post envoyant "OPTIONS" comme REQUEST_METHOD dans Firefox

Edit: Après quelques recherches supplémentaires, j'ai découvert que l'en-tête OPTIONS est utilisé pour savoir si la demande du domaine d'origine est autorisée. En utilisant Fiddler, j'ai ajouté ce qui suit aux en-têtes de réponse de mon serveur.

 Access-Control-Allow-Origin: *
 Access-Control-Allow-Headers: Content-Type
 Access-Control-Allow-Methods: POST, GET, OPTIONS

Une fois que le navigateur a reçu cette réponse, il a ensuite envoyé la demande POST correcte avec les données json. Il semblerait que le type de contenu codé par url par défaut soit considéré comme sûr et ne subisse donc pas les vérifications interdomaines supplémentaires.

Il semble que vous devrez ajouter les en-têtes mentionnés précédemment à la réponse de votre serveur à la requête OPTIONS. Vous devez bien sûr les configurer pour autoriser les requêtes provenant de domaines spécifiques plutôt que tous.

J'ai utilisé le jQuery suivant pour tester cela.

$.ajax({
   type: "POST",
   url: "http://myDomain.com/path/AddPlayer",
   data: JSON.stringify({
      Name: "Test",
       Credits: 0
   }),
   //contentType: "application/json",
   dataType: 'json',
   complete: function(data) {
       $("content").html(data);
  }
});​

Références:

• http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
• http://enable-cors.org/
• https://developer.mozilla.org/en/http_access_control

Je peux te montrer comment je l'ai utilisé

  function GetDenierValue() {
        var denierid = $("#productDenierid").val() == '' ? 0 : $("#productDenierid").val();
        var param = { 'productDenierid': denierid };
        $.ajax({
            url: "/Admin/ProductComposition/GetDenierValue",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            type: "POST",
            data: JSON.stringify(param),
            success: function (msg) {
                if (msg != null) {
                    return msg.URL;
                }
            }
        });
    }

Donc, tout ce que vous devez faire pour que cela fonctionne est d'ajouter:

headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
}

comme champ à votre demande de message et cela fonctionnera.

J'ai reconnu ces écrans, j'utilise CodeFluentEntities et j'ai une solution qui a fonctionné pour moi aussi.

J'utilise cette construction:

$.ajax({
   url: path,
   type: "POST",
   contentType: "text/plain",
   data: {"some":"some"}
}

comme vous pouvez le voir, si j'utilise

contentType: "",

ou

contentType: "text/plain", //chrome

Tout fonctionne bien.

Je ne suis pas sûr à 100% que ce soit tout ce dont vous avez besoin, car j'ai également changé d'en-têtes.

Si vous utilisez ceci:

contentType: "application/json"

AJAX n'enverra pas les paramètres GET ou POST au serveur .... je ne sais pas pourquoi.

Il m'a fallu des heures pour l'apprendre aujourd'hui.

Utilisez simplement:

$.ajax(
  { url : 'http://blabla.com/wsGetReport.php',
    data : myFormData, type : 'POST', dataType : 'json', 
    // contentType: "application/json", 
    success : function(wsQuery) { }
  }
)

J'ai trouvé la solution à ce problème ici . N'oubliez pas d'autoriser les OPTIONS de verbe sur le gestionnaire de service d'application IIS.

Fonctionne très bien. Merci André Pedroso. :-)

J'ai eu le même problème. J'exécute une application java reste sur un serveur jboss. Mais je pense que la solution est similaire sur une application Web ASP .NET.

Firefox fait un appel préalable à votre serveur / URL de repos pour vérifier quelles options sont autorisées. C'est la requête "OPTIONS" à laquelle votre serveur ne répond pas en conséquence. Si cet appel OPTIONS reçoit une réponse correcte, un deuxième appel est effectué, qui est la requête "POST" réelle avec le contenu json.

Cela se produit uniquement lors d'un appel interdomaine. Dans votre cas, appelezhttp://localhost:16329/Hello ' au lieu d'appeler un chemin d'url sous le même domaine '/ Hello'

Si vous avez l'intention de faire un appel interdomaine, vous devez améliorer votre classe de service de repos avec une méthode annotée qui prend en charge une requête http "OPTIONS". Voici l'implémentation Java correspondante:

@Path("/rest")
public class RestfulService {

    @POST
    @Path("/Hello")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.TEXT_PLAIN)
    public string HelloWorld(string name)
    {
        return "hello, " + name;
    }

//THIS NEEDS TO BE ADDED ADDITIONALLY IF MAKING CROSS-DOMAIN CALLS

    @OPTIONS
    @Path("/Hello")
    @Produces(MediaType.TEXT_PLAIN+ ";charset=utf-8")
    public Response checkOptions(){
        return Response.status(200)
        .header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Headers", "Content-Type")
        .header("Access-Control-Allow-Methods", "POST, OPTIONS") //CAN BE ENHANCED WITH OTHER HTTP CALL METHODS 
        .build();
    }
}

Donc, je suppose que dans .NET, vous devez ajouter une méthode supplémentaire annotée avec

[WebInvoke(
        Method = "OPTIONS",
        UriTemplate = "Hello",
        ResponseFormat = WebMessageFormat.)]

où les en-têtes suivants sont définis

.header("Access-Control-Allow-Origin", "*")
        .header("Access-Control-Allow-Headers", "Content-Type")
        .header("Access-Control-Allow-Methods", "POST, OPTIONS")

J'ai eu la solution pour envoyer les données JSON par requête POST via jquery ajax. J'ai utilisé le code ci-dessous

    var data = new Object();
    data.p_clientId = 4;
    data =  JSON.stringify(data);

    $.ajax({
      method: "POST",
      url: "http://192.168.1.141:8090/api/Client_Add",
      data: data,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'text/plain'
    }
    })
      .done(function( msg ) {
        alert( "Data Saved: " + msg );
      });


        });
    });

J'ai utilisé 'Content-Type': 'text/plain'dans l'en-tête pour envoyer les données json brutes.
Parce que si nous utilisons Content-Type: 'application/json'les méthodes de requête converties en OPTION, mais que l'utilisation de Content-Type: 'test/plain'la méthode ne se convertit pas et reste comme POST. Espérons que cela aidera quelqu'un.

Salut Ces deux lignes ont fonctionné pour moi.

contentType: "application / json; charset = utf-8", dataType: "json"

 $.ajax({
            type: "POST",
            url: "/v1/candidates",
            data: obj,
            **contentType:"application/json; charset=utf-8",
            dataType:"json",**
            success: function (data) {
                table.row.add([
                    data.name, data.title
                ]).draw(false);
            }

Merci, Prashant