Gửi FormData lồng nhau trên AJAX

Question

Tôi cần gửi một số dữ liệu bằng ajax và FormData, vì tôi muốn gửi một tệp và một số tham số khác. Con đường tôi thường gửi dữ liệu là thế này:

$.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", 
     }, 
    }, 
    ... 
}); 

Nếu tôi không sử dụng FormData(), tôi không có vấn đề, nhưng khi sử dụng FormData(), chỉ có các dữ liệu trên Lvl1 là ok, nhưng bất cứ điều gì là lồng nhau hiển thị như chuỗi như thế này

<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> 

Nếu tôi sử dụng FormData() để mã hóa dữ liệu bên trong Lvl1-3, thay vì [object Object] tôi nhận được [object FormData]

làm thế nào để có được một mảng thay vì chuỗi trên Lvl1-3 ?

LƯU Ý: Nếu tệp ở cấp cao nhất (Lvl_1), tôi có thể gửi tệp mà không gặp vấn đề gì khi sử dụng FormData(). Tôi đã không viết mã của tập tin đính kèm bởi vì đó không phải là vấn đề, dữ liệu lồng nhau là. Tôi chỉ đề cập đến tập tin vì đó là lý do tại sao tôi đang sử dụng FormData().

Answer 1

URL Dữ liệu biểu mẫu được mã hóa không có cách nào để thể hiện cấu trúc dữ liệu phức tạp. Nó chỉ hỗ trợ các cặp khóa = giá trị đơn giản.

?foo=1&bar=2 

Hầu hết các thư viện phân tích mẫu dữ liệu cho phép các mảng dữ liệu sử dụng các phím có cùng tên

?foo=1&foo=2 

PHP bắt bu lông cú pháp riêng của mình trên đầu của định dạng đó:

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

mà cho phép các khóa có tên trong một mảng kết hợp:

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

và lồng mảng:

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

Do sự phổ biến của PHP, jQuery thông qua đó cú pháp để tạo ra hình thức dữ liệu khi bạn vượt qua một đối tượng hoạt Javascript để data.

Nếu bạn muốn sử dụng FormData thì jQuery sẽ không xử lý lại nó cho bạn.

Hiệu ứng bạn đang thấy là vì bạn đang cố gắng đặt đối tượng (tôi đoán một cá thể FormData, nhưng bạn chưa cho biết phần mã của bạn) làm đối số thứ hai cho append - trong đó chuỗi kỳ vọng.

Bạn cần tự tạo tên khóa bằng chính cú pháp của PHP.

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

Cuối cùng, tôi xâu chuỗi các thông số lồng nhau và hủy xâu chúng ở đầu bên kia.

Ví dụ, nếu tôi muốn vượt qua:

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

Sau đó, tôi làm:

// 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"];