Jquery Ajax Envoi de json à webservice

J'essaie d'envoyer un objet JSON à un webservice asp.net.

Mon JSON ressemble à ceci :

var markers = { "markers": [
  { "position": "128.3657142857143", "markerPosition": "7" },
  { "position": "235.1944023323615", "markerPosition": "19" },
  { "position": "42.5978231292517", "markerPosition": "-3" }
]};

J'utilise json2.js pour mettre en forme mon objet json.

et j'utilise jquery pour l'envoyer à mon webservice.

  $.ajax({
        type: "POST",
        url: "/webservices/PodcastService.asmx/CreateMarkers",
        data: markers,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){alert(data);},
        failure: function(errMsg) {
            alert(errMsg);
        }
  });

J'obtiens l'erreur suivante :

"Primitive JSON invalide :

J'ai trouvé un tas de messages à ce sujet et il semble que ce soit un problème très courant, mais rien de ce que j'essaie ne résout le problème.

Lorsque firebug ce qui est posté au serveur, cela ressemble à ceci :

markers%5B0%5D%5Bposition%5D=128.3657142857143&markers%5B0%5D%5BmarkerPosition%5D=7&markers%5B1%5D%5Bposition%5D=235.1944023323615&markers%5B1%5D%5BmarkerPosition%5D=19&markers%5B2%5D%5Bposition%5D=42.5978231292517&markers%5B2%5D%5BmarkerPosition%5D=-3

La fonction de mon webservice qui est appelée est la suivante :

[WebMethod]
public string CreateMarkers(string markerArray)
{
    return "received markers";
}
Solution

Vous avez mentionné l'utilisation de json2.js pour stringifier vos données, mais les données POSTées semblent être du JSON URLEncodé Vous l'avez peut-être déjà vu, mais [cet article sur la primitive JSON invalide][1] explique pourquoi le JSON est URLEncodé.

Je [déconseille de passer une chaîne JSON brute, sérialisée manuellement, dans votre méthode][2]. ASP.NET va automatiquement désérialiser JSON les données POST de la requête, donc si vous sérialisez manuellement et envoyez une chaîne JSON à ASP.NET, vous finirez par devoir sérialiser JSON votre chaîne sérialisée JSON.

Je suggérerais quelque chose de plus proche de ces lignes :

var markers = [{ "position": "128.3657142857143", "markerPosition": "7" },
               { "position": "235.1944023323615", "markerPosition": "19" },
               { "position": "42.5978231292517", "markerPosition": "-3" }];

$.ajax({
    type: "POST",
    url: "/webservices/PodcastService.asmx/CreateMarkers",
    // The key needs to match your method's input parameter (case-sensitive).
    data: JSON.stringify({ Markers: markers }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data){alert(data);},
    failure: function(errMsg) {
        alert(errMsg);
    }
});

Pour éviter le problème de la primitive JSON invalide, il faut transmettre à jQuery une chaîne JSON pour le paramètre data, et non un objet JavaScript, afin que jQuery ne tente pas de coder vos données à l'aide d'un code URLE.

Côté serveur, faites correspondre les paramètres d'entrée de votre méthode à la forme des données que vous transmettez :

public class Marker
{
  public decimal position { get; set; }
  public int markerPosition { get; set; }
}

[WebMethod]
public string CreateMarkers(List Markers)
{
  return "Received " + Markers.Count + " markers.";
}

Vous pouvez également accepter un tableau, comme Marker[] Markers, si vous préférez. Le désérialiseur utilisé par ASMX ScriptServices (JavaScriptSerializer) est assez flexible et fera tout ce qu'il peut pour convertir vos données d'entrée dans le type côté serveur que vous spécifiez.

[1] : http://encosia.com/asmx-scriptservice-mistake-invalid-json-primitive/ [2] : http://encosia.com/asp-net-web-services-mistake-manual-json-serialization/

Commentaires (13)
  1. markers n'est pas un objet JSON. C'est un objet JavaScript normal.
  2. [Lire à propos de l'option data:] [1] :

    Les données à envoyer au serveur. Elles sont converties en une chaîne de requête, si ce n'est pas déjà une chaîne.

Si vous voulez envoyer les données en JSON, vous devez d'abord les encoder :

data: {markers: JSON.stringify(markers)}

jQuery ne convertit pas automatiquement les objets ou les tableaux en JSON.


Mais je suppose que le message d'erreur provient de l'interprétation de la réponse du service. Le texte que vous renvoyez n'est pas JSON. Les chaînes JSON doivent être placées entre guillemets. Vous devez donc le faire :

return "\"received markers\"";

Je ne sais pas si votre problème réel est l'envoi ou la réception des données.

[1] : http://api.jquery.com/jQuery.ajax/

Commentaires (9)

J'ai rencontré ce problème également et voici ma solution.

Si vous rencontrez une exception de type "invalid json object" lors de l'analyse des données, même si vous savez que votre chaîne json est correcte, stringifiez les données que vous avez reçues dans votre code ajax avant de les analyser en JSON :

$.post(CONTEXT+"servlet/capture",{
        yesTransactionId : yesTransactionId, 
        productOfferId : productOfferId
        },
        function(data){
            try{
                var trimData = $.trim(JSON.stringify(data));
                var obj      = $.parseJSON(trimData);
                if(obj.success == 'true'){ 
                    //some codes ...
Commentaires (0)