web-dev-qa-db-fra.com

Comment je POST un tableau d'objets avec $ .ajax (jQuery ou Zepto)

J'aimerais POST un tableau d'objets avec $ .ajax dans Zepto ou Jquery. Les deux présentent la même erreur étrange, mais je ne trouve pas ce que je fais mal.

Les données sont enregistrées sur le serveur lorsqu’elles sont envoyées à l’aide d’un client test tel que «RestEasy», et je vois que la demande est mutilée dans le panneau de navigation du navigateur. JS est donc le coupable.

Si j'envoie un tableau d'objets en tant que propriété data d'un POST, ils ne sont pas correctement envoyés.

Objet de données:

var postData = [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]

Demande:

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: postData
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});

Corps de la requête tel qu'il apparaît dans le navigateur:

"bob=undefined&jonas=undefined"

Ceci peut être vu plus directement en utilisant la méthode $ .param que jQuery et Zepto utilisent pour préparer les données POST.

$.param(
  [
    { "id":"1", "name":"bob"}
  , { "id":"2", "name":"jonas"}
  ]
)
// Output: "bob=undefined&jonas=undefined"

Il semble donc que la préparation de ces bibliothèques pour la publication complexe de données postales est différente de celle que je prévois.

Je vois cette réponse, mais je ne veux pas envoyer les données en tant que paramètre de requête car je poste beaucoup de contenu . Comment puis-je envoyer un tableau dans un message .ajax en utilisant jQuery?

Quelle est la bonne façon d’envoyer plusieurs objets sur POST à l’aide de jQuery/Zepto?

L'utilisation de $ .ajax ({... data: JSON.stringify (postData) ...}) envoie un contenu non mutilé, mais le serveur n'aime pas le format.

Update: On dirait que JSON.stringify envoie un contenu correctement formaté. Le problème est que le côté serveur est très, très spécifique sur la structure de l'objet qu'il veut. Si j'ajoute ou supprime des propriétés de l'objet, le processus entier échouera plutôt que d'utiliser les propriétés correspondantes. Cela n’est pas pratique car il est agréable d’utiliser le contenu envoyé par le serveur comme modèle de vue, mais les modèles de vue sont modifiés .... Nous travaillons toujours sur la meilleure solution.

jqueryajaxrestzepto
41
SimplGy

Assurez-vous de stringify avant d'envoyer. Je me suis trop appuyé sur les bibliothèques et je pensais qu'elles encoderaient correctement en fonction du type contentType que je publiais, mais elles ne semblent pas l'être.

Travaux:

$.ajax({
    url: _saveAllDevicesUrl
,   type: 'POST'
,   contentType: 'application/json'
,   data: JSON.stringify(postData) //stringify is important
,   success: _madeSave.bind(this)
});

Je préfère cette méthode à l’utilisation d’un plugin tel que $ .toJSON, bien que cela produise la même chose.

76
SimplGy

Essayez ce qui suit:

$.ajax({
  url: _saveDeviceUrl
, type: 'POST'
, contentType: 'application/json'
, dataType: 'json'
, data: {'myArray': postData}
, success: _madeSave.bind(this)
//, processData: false //Doesn't help
});
14
Ricardo Alvaro Lohmann

edit: Je suppose que l'utilisation de la méthode native JSON.stringify () , prise en charge par par la plupart des navigateurs commence à être sûre ((même IE8 + si vous le souhaitez).

Aussi simple que:

JSON.stringify(yourData)

Vous devez encoder vos données en JSON avant de les envoyer, vous ne pouvez pas simplement envoyer un objet comme celui-ci sous la forme POST data. 

Je recommande d'utiliser le plugin jQuery json pour le faire. Vous pouvez ensuite utiliser quelque chose comme ceci dans jQuery:

$.post(_saveDeviceUrl, {
    data : $.toJSON(postData)
}, function(response){
    //Process your response here
}
);
4
Simon

Voir cet exemple de poster le tableau de différents types

function PostArray() {
    var myObj = [
        { 'fstName': 'name 1', 'lastName': 'last name 1', 'age': 32 }
      , { 'fstName': 'name 2', 'lastName': 'last name 1', 'age': 33 }
    ];

    var postData = JSON.stringify({ lst: myObj });
    console.log(postData);

    $.ajax({
        type: "POST",
        url: urlWebMethods + "/getNames",
        data: postData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            alert(response.d);
        },
        failure: function (msg) {
            alert(msg.d);
        }
    });
}

Si vous utilisez un WebMethod en C #, vous pouvez récupérer les données comme ceci

[WebMethod]
    public static string getNames(IEnumerable<object> lst)
    {
        string names = "";
        try
        {
            foreach (object item in lst)
            {
                Type myType = item.GetType();
                IList<PropertyInfo> props = new List<PropertyInfo>(myType.GetProperties());

                foreach (PropertyInfo prop in props)
                {
                    if(prop.Name == "Values")
                    {
                        Dictionary<string, object> dic = item as Dictionary<string, object>;
                        names += dic["fstName"];
                    }
                }
            }
        }
        catch (Exception ex)
        {
             names = "-1";
        }
        return names;
    }

Exemple dans POST un tableau d'objets avec $ .ajax to C # WebMethod

0
Nuno Dias