it-swarm.com.de

Wie mache ich POST ein Array von Objekten mit $ .ajax (jQuery oder Zepto)

Ich möchte ein Array von Objekten mit $ .ajax in Zepto oder Jquery POST. Beide weisen den gleichen merkwürdigen Fehler auf, aber ich kann nicht finden, was ich falsch mache.

Die Daten werden auf dem Server gespeichert, wenn sie mit einem Testclient wie 'RestEasy' gesendet werden. Ich sehe die Anforderung im Browserfeld des Browsers verstümmelt. Ich glaube, JS ist der Schuldige.

Wenn ich ein Array von Objekten als Dateneigenschaft eines POST sende, werden diese nicht ordnungsgemäß gesendet.

Datenobjekt:

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

Anfordern:

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

Anfragekörper wie im Browser gesehen:

"bob=undefined&jonas=undefined"

Dies ist direkter sichtbar, wenn Sie die $ .param-Methode verwenden, die sowohl jQuery als auch Zepto zur Vorbereitung von POST -Daten verwenden.

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

Es scheint also, dass die Vorbereitung, die diese Bibliotheken für komplexe Postdaten durchführen, anders ist als ich erwartet habe.

Ich sehe diese Antwort, aber ich möchte die Daten nicht als Abfrageparameter senden, da ich eine Menge POST POST stelle . Wie sende ich ein Array in einem .ajax-Beitrag mit jQuery?

Was ist der richtige Weg, um mehrere Objekte über POST mit jQuery/Zepto zu senden?

Wenn Sie $ .ajax ({... data: JSON.stringify (postData) ...}) verwenden, wird nicht manipulierter Inhalt gesendet, das Format wird jedoch vom Server nicht unterstützt.

Update: Es scheint, als würde JSON.stringify korrekt formatierten Inhalt senden. Das Problem ist, dass die Serverseite sehr, sehr spezifisch bezüglich der Struktur des gewünschten Objekts ist. Wenn ich dem Objekt Eigenschaften hinzufüge oder daraus entferne, schlägt der gesamte Prozess fehl, anstatt die übereinstimmenden Eigenschaften zu verwenden. Dies ist unpraktisch, da es von Vorteil ist, vom Server gesendeten Inhalt als Ansichtsmodell zu verwenden. Ansichtsmodelle werden jedoch geändert. Noch immer arbeitet sie an der besten Lösung.

41
SimplGy

Stellen Sie sicher, dass stringify vor dem Senden ausgewählt ist. Ich habe mich zu sehr auf die Bibliotheken gestützt und dachte, dass sie basierend auf dem von mir geposteten contentType richtig kodieren würden, aber es scheint nicht so.

Werke:

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

Ich bevorzuge diese Methode der Verwendung eines Plugins wie $ .toJSON, obwohl dies dasselbe bewirkt.

76
SimplGy

Versuche Folgendes:

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

edit: Ich denke, es ist jetzt sicherer, die native JSON.stringify () - Methode zu verwenden, die von den meisten Browsern unterstützt wird (ja, sogar IE8 +, wenn Sie sich fragen).

So einfach wie:

JSON.stringify(yourData)

Sie sollten Ihre Daten vor dem Senden in JSON codieren. Sie können ein solches Objekt nicht einfach als POST -Daten senden. 

Ich empfehle, das Json-Plugin jQuery zu verwenden. Sie können dann in jQuery so etwas verwenden:

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

Überprüfen Sie dieses Beispiel, um ein Array verschiedener Typen zu erstellen

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

Wenn Sie eine Webmethode in C # verwenden, können Sie die Daten auf diese Weise abrufen

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

Beispiel in POST ein Array von Objekten mit $ .ajax an C # WebMethod

0
Nuno Dias