İç içe yerleştirme FormData üzerinde AJAX

Question

Ajax ve FormData kullanarak bazı veriler göndermem gerekiyor çünkü bir dosya ve bazı diğer parametreleri göndermek istiyorum. Genellikle veri göndermek yolu şudur:

$.ajax({ 
    type:  'POST', 
    url:  'some_url', 
    dataType: 'json', 
    processData:false, 
    contentType:false, 
    data:{ 
     Lvl_1-1: 'something', 
     Lvl_1-2: 'something', 
     Lvl_1-3: { 
      Lvl_1-3-1: "something", 
      Lvl_1-3-2: "something", 
      Lvl_1-3-3: "something", 
     }, 
    }, 
    ... 
}); 

Ben FormData() kullanmıyorsanız, ben hiçbir sorunum yok, ama FormData() kullanırken, Lvl1 yalnızca veri Tamam, ama iç içe bir şey Ben Lvl1-3 üzerinde dize yerine bir dizi alabilirim nasıl [object FormData]

olsun yerine [object Object] arasında, Lvl1-3 içinde bu

<b>array</b> <i>(size=3)</i> 
    'Lvl1-1' <font color='#888a85'>=&gt;</font> <small>string</small> 
     <font color='#cc0000'>'Something'</font> 
     <i>(length=23)</i> 
    'Lvl1-2' <font color='#888a85'>=&gt;</font> <small>string</small> 
     <font color='#cc0000'>''Something''</font> <i>(length=3)</i> 
    'Lvl1-3' <font color='#888a85'>=&gt;</font> <small>string</small> 
     <font color='#cc0000'>'[object Object]'</font> <i>(length=17)</i> 

Ben FormData kullanırsanız() kodlamak için verileri gibi dizesi olarak görüntülenir ?

NOT: Dosya en üst düzeyde (Lvl_1) ise, dosyayı FormData() kullanarak sorunsuz bir şekilde gönderebilirim. Eklenen dosyanın kodunu yazmamıştım çünkü sorun değil, iç içe geçmiş veri. Dosyadan bahsettim çünkü bu yüzden FormData() kullanıyorum.

Answer 1

URL Kodlanmış form verilerinin karmaşık veri yapılarını ifade etmenin herhangi bir doğal yolu yoktur. Sadece basit anahtar = değer çiftlerini destekler.

?foo=1&bar=2 

Çoğu form verilerini ayrıştırma kütüphaneler izin

?foo=1&foo=2 

PHP bu biçimdeki üstünde kendi sözdizimi cıvatalı

aynı isimde tuşlarını kullanarak veri diziler:

?foo[]=1&foo[]=2 

için izin ilişkisel bir dizi içindeki anahtarlar:

?foo[bar]=1&foo[baz]=2 

ve iç içe diziler: Eğer data bir JavaScript nesnesi geçerken

?foo[bar][level2a]=1&foo[bar][level2b]=2 

nedeniyle PHP yaygınlığı nedeniyle, jQuery Form verilerini oluşturmak için bu sözdizimi kabul etti.

FormData kullanmak isterseniz jQuery sizin için yeniden işlemeyecektir.

Gördüğünüz etki, bir nesneyi (örneğin, bir FormData örneğini tahmin ediyorum, ancak kodunuzun o kısmını göstermediniz) ikinci bir argüman olarak append - bir dizeye yerleştirmeye çalıştığınız içindir. beklenen.

Anahtar isimlerini PHP'nin sözdizimini kullanarak kendiniz oluşturmanız gerekir.

form_data_instance.append("Lvl_1-3[Lvl_1-3-1]", "something"); 
form_data_instance.append("Lvl_1-3[Lvl_1-3-2]", "something"); 
form_data_instance.append("Lvl_1-3[Lvl_1-3-3]", "something"); 

Answer 2

Sonunda, iç içe geçmiş parametrelerimi dizginlerim ve bunları diğer uçta engellerim. Örneğin

, ben geçirmek istiyorsanız:

{"sthing": 
    {"sthing":"sthing"}, 
    {"picture": 
    {"legend":"great legend"}, 
    {"file":"great_picture.jpg"} 
    } 
} 

Sonra yapın:

// On the client side 
const nestedParams = {"sthing": 
         {"sthing":"sthing"}, 
         {"picture": 
         {"legend":"great legend"} 
         } 
        }; 
const pictureFile = document.querySelector('input[type="file"]')[0]; 
const formDataInstance = formData new; 
formDataInstance.append("nested_params": JSON.stringify(nested_params); 
formDataInstance.append("file": document.querySelector('input[type="file"]')[0]); 


// On the server side 
params["nested_params"] = JSON.parse(params["nested_params"]); 
params["nested_params"]["sthing"]["picture"]["file"] = params["file"];