Jquery Ajax Envoi de JSON au webservice

Question

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 filtrer 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 non valide

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 voit ce qui est posté sur le 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";
}

Answer 1

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 ce billet sur la primitive JSON invalide couvre la raison pour laquelle le JSON est URLEncodé.

Je conseiller contre passer une chaîne JSON brute, sérialisée manuellement, dans votre méthode . ASP.NET va automatiquement désérialiser JSON les données POST de la requête, donc si vous sérialisez et envoyez manuellement 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);},
    error: function(errMsg) {
        alert(errMsg);
    }
});

La clé pour éviter le problème de la primitive JSON invalide est de transmettre à jQuery une chaîne JSON pour l'objet data et non un objet JavaScript, afin que jQuery ne tente pas d'URLEncoder vos données.

Du 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<Marker> 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.

Answer 2

1. markers n'est pas un objet JSON. Il s'agit d'un objet JavaScript normal.

2. Lisez à propos de la data: option :

   Données à envoyer au serveur. Elles sont converties en un 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. Donc vous devriez faire :

return "\"received markers\"";

Je ne sais pas si votre problème réel est d'envoyer ou de recevoir les données.

Answer 3

J'ai essayé la solution de Dave Ward. La partie données n'était pas envoyée par le navigateur dans la partie payload de la requête post, car la balise contentType est réglé sur "application/json" . Une fois que j'ai retiré cette ligne, tout a fonctionné à merveille.

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);
    }
});

Answer 4

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

Si vous rencontrez une exception d'objet json invalide lors de l'analyse des données, bien que vous sachiez que votre chaîne json est correcte, stringifiez les données 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 ...

Answer 5

S'il vous plaît suivez ceci pour faire un appel ajax au webservice de java var param = { feildName : feildValue } ; JSON.stringify({data : param})

$.ajax({
            dataType    : 'json',
            type        : 'POST',
            contentType : 'application/json',
            url         : '<%=request.getContextPath()%>/rest/priceGroups',
            data        : JSON.stringify({data : param}),
            success     : function(res) {
                if(res.success == true){
                    $('#alertMessage').html('Successfully price group created.').addClass('alert alert-success fade in');
                    $('#alertMessage').removeClass('alert-danger alert-info');
                    initPriceGroupsList();
                    priceGroupId = 0;
                    resetForm();                                                                    
                }else{                          
                    $('#alertMessage').html(res.message).addClass('alert alert-danger fade in');
                }
                $('#alertMessage').alert();         
                window.setTimeout(function() { 
                    $('#alertMessage').removeClass('in');
                    document.getElementById('message').style.display = 'none';
                }, 5000);
            }
        });