AJAX

2015-02-27 7 views
6

पर नेस्टेड फॉर्मडेटा भेजना मुझे AJAX और FormData का उपयोग करके कुछ डेटा भेजने की आवश्यकता है, क्योंकि मैं एक फ़ाइल और कुछ अन्य पैरामीटर भेजना चाहता हूं। जिस तरह से मैं आमतौर पर डेटा भेजने यह है:AJAX

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

अगर मैं FormData() का उपयोग नहीं है, मैं कोई समस्या नहीं है, लेकिन जब FormData() का उपयोग कर, Lvl1 पर केवल डेटा ठीक है, लेकिन कुछ भी नेस्ट है इस

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

अगर मैं FormData() का उपयोग करने के लिए सांकेतिक शब्दों में बदलना Lvl1-3 अंदर डेटा की तरह स्ट्रिंग के रूप में दिखाया गया है, [object Object] के बजाय मैं [object FormData]

मिल मैं कैसे Lvl1-3 पर स्ट्रिंग के बजाय एक सरणी मिलता है ?

नोट: यदि फ़ाइल शीर्ष स्तर पर है (Lvl_1) मैं फॉर्मडेटा() का उपयोग कर फ़ाइल को बिना किसी समस्या के भेज सकता हूं। मैंने संलग्न फाइल का कोड नहीं लिखा क्योंकि यह समस्या नहीं है, नेस्टेड डेटा है। मैंने अभी फ़ाइल का जिक्र किया है इसलिए मैं फॉर्मडाटा() का उपयोग कर रहा हूं।

+0

जांच https://github.com/foo123/serialiser।js से serialise जटिल/नेस्टेड फॉर्म फ़ील्ड बनाने के लिए डेटा, ऑब्जेक्ट, जेसन, यूआरएल-एन्कोडेड डेटा (लेखक) –

उत्तर

11

यूआरएल एनकोडेड फॉर्म डेटा में जटिल डेटा संरचनाओं को व्यक्त करने का कोई मूल तरीका नहीं है। यह केवल सरल कुंजी = मूल्य जोड़े का समर्थन करता है।

?foo=1&bar=2 

अधिकांश प्रपत्र डेटा पार्स पुस्तकालयों की अनुमति ही नाम के साथ कुंजियों का उपयोग

?foo=1&foo=2 

पीएचपी कि प्रारूप के शीर्ष पर अपनी ही वाक्य रचना बोल्ट डेटा की सरणियों:

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

जिसके लिए अनुमति दी एक सहयोगी सरणी में नाम कुंजी:

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

और नेस्ट सरणियों:

कारण पीएचपी के प्रसार से
?foo[bar][level2a]=1&foo[bar][level2b]=2 

, jQuery प्रपत्र डेटा पैदा करने के लिए है कि वाक्य रचना को अपनाया जब आप data को JavaScript ऑब्जेक्ट गुजरती हैं।

यदि आप FormData का उपयोग करना चाहते हैं तो jQuery आपके लिए पुन: प्रसंस्करण नहीं करेगा।

जो प्रभाव आप देख रहे हैं वह है क्योंकि आप एक ऑब्जेक्ट डालने की कोशिश कर रहे हैं (मैं एक फॉर्मडाटा उदाहरण अनुमान लगा रहा हूं, लेकिन आपने अपने कोड का वह हिस्सा नहीं दिखाया है) append पर दूसरा तर्क - जहां एक स्ट्रिंग है अपेक्षित होना।

आपको 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"); 
+0

धन्यवाद! यह वही है जिसे मैं देख रहा था। अब मुझे इस विषय पर बेहतर समझ है। – kunde

2

मेरे अंत में, मैं अपने नेस्टेड पैरामीटर को स्ट्रिंग करता हूं और उन्हें दूसरे छोर पर अनस्ट्र्रिफाई करता हूं।

उदाहरण के लिए

, अगर मैं पास करना चाहते हैं:

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

तो मैं कार्य करें:

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

 संबंधित मुद्दे