2011-12-20 11 views
15

मैं एक समृद्ध वेब एप्लिकेशन बना रहा हूं जो बहुत सारे डेटा का उपयोग करता है। जब मैं इसे बना रहा हूं तो मैंने पाया कि मैं खुद को दोहरा रहा था।JSON डेटा को HTML फॉर्म इनपुट में छिपाएं?

यह समस्या है। मुझे क्लाइंट द्वारा देखे जा रहे डेटा का प्रतिनिधित्व करने के लिए एचटीएमएल तत्वों में छुपा अनुप्रयोग तर्क डालना होगा।

यह एक समाधान मैं कुछ समय पहले मिला है:

<a href="bla" data-itemId="1" .... more data. 

इस विधि के साथ दो समस्याएं हैं।

  1. मैं सरणी का प्रतिनिधित्व नहीं कर सकता।
  2. यह सिर्फ बदसूरत है।

मैंने एक समाधान की खोज की लेकिन मुझे कुछ भी नहीं मिला। मैं भी फेसबुक, खोला फ़ायरबग, के पास गया और इस पाया:

{"actor":"19034719952","target_fbid":"454811929952","target_profile_id":"19034719952","type_id":"7","source":"1","assoc_obj_id":"","source_app_id":"","extra_story_params":[],"content_timestamp":"1324385453","check_hash":"9eabc3553e8a2fb6"} 

यह json एक input[type=hidden] तत्व के अंदर था।

मैं json_encode();

<input type="hidden" name="track" value="{"_id":{"$id":"4eee908f615c2102e9010000"},"link":"george-wassouf-flag-of-my-heart-longing","file":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","lyrics":null,"freezed":false,"hits":0,"images":{"large":"\/assets\/static\/default.track.large.jpg","thumb":"\/assets\/static\/default.track.thumb.jpg","icon":"\/assets\/static\/default.track.icon.jpg"},"duration":"300","created":{"sec":1324257423,"usec":78000},"albums":[{"_id":{"$id":"4eee8d63615c21f6e7000000"},"names":{"ar":"\u0643\u0644\u0627\u0645\u0643 \u064a\u0627 \u062d\u0628\u064a\u0628\u064a","en":"Kalamak ya Habibi"},"link":"george-wassouf-kalamak-ya-habibi","images":{"original":"\/m\/pics\/albums\/o.4eee8d612c3183.11879972.jpg","poster":"\/m\/pics\/albums\/p.4eee8d63967072.02645896.jpg","large":"\/m\/pics\/albums\/l.4eee8d63a89111.20372767.jpg","small":"\/m\/pics\/albums\/s.4eee8d63b18927.47242533.jpg","thumb":"\/m\/pics\/albums\/t.4eee8d63b7f1f4.11879932.jpg","icon":"\/m\/pics\/albums\/i.4eee8d63bf1304.59902753.jpg"}},{"_id":{"$id":"4eee8d63615c21f6e7000000"},"name":"Kalamak ya Habibi","link":"george-wassouf-kalamak-ya-habibi"}],"name":"Flag of my heart longing","title":"Flag of my heart longing","mp3":"\/m\/tracks\/t.4eee908daca2a3.49941874.mp3","poster":"\/m\/pics\/artists\/p.4eee85cd7ed579.65275366.jpg","artists":[{"_id":{"$id":"4eee85cd615c21ece6000000"},"name":"George Wassouf","link":"george-wassouf"}]}" /> 

साथ एक ही बात करने की कोशिश की लेकिन जब मैं मूल्य हो रही कोशिश मैं इस { मिलता है।

मैंने JSON_HEX_TAG जैसे सभी स्थिरांकों को आजमाया है और इस प्रकार के कोई प्रश्न नहीं मिला।

मैं जेसन को एचटीएमएल में सही तरीके से कैसे डाल सकता हूं और फिर इसे jquery/जावास्क्रिप्ट के साथ प्राप्त कर सकता हूं?

उत्तर

31

आपकी स्ट्रिंग सही है, लेकिन इसे HTML में परिभाषित नहीं किया जा सकता है क्योंकि इसमें डबल कोट्स हैं।

एचटीएमएल आपको दोहरे उद्धरणों से बचने की आवश्यकता है जब आप एक स्ट्रिंग को परिभाषित कर रहे हैं जो स्वयं डबल कोट्स के भीतर संलग्न है।ऐसा करने का उपयुक्त तरीका HTML इकाई उपयोग कर रहा है:

value="&quot;"

पीएचपी से:

उपयोग htmlspecialchars या htmlentities (http://www.php.net/manual/en/function.htmlspecialchars.php)। किसी भी मामले में, आप आमतौर पर क्लाइंट ब्राउज़र पर लिखने वाले प्रत्येक मूल्य पर इसका उपयोग करना चाहिए (ऐसा नहीं करने से सुरक्षा जोखिम हो सकते हैं)।

जावास्क्रिप्ट से:

आप जावास्क्रिप्ट से ऐसा करने की जरूरत है, तो आप प्रोग्राम के छिपा तत्व का मान सेट कर सकते हैं (बशर्ते आपके JSON स्ट्रिंग पहले से ही एक Javascript चर में निहित है)। इस तरह से आप स्ट्रिंग शाब्दिक एन्कोडिंग के बारे में चिंता करने की ज़रूरत नहीं है: Escaping HTML strings with jQuery:

hiddenElement.value = yourString;

आदेश बचने समारोह आप उपयोग कर सकते हैं पाने के लिए, हो सकता है इस सूत्र की जाँच करें।

+0

धन्यवाद, मैं htmlspecialchars का उपयोग करके समाप्त हुआ, मुझे उम्मीद है कि इस विधि का उपयोग करने में कोई समस्या नहीं है ... – Pinokyo

-2

सबसे अच्छा तरीका मैंने पाया एकल ' उद्धरण के लिए मूल्य विशेषता परिवर्तित किया जाता है: value='{"label":"value"}'

  • मान्य JSON केवल दोहरे उद्धरण चिह्नों

भी साथ काम करता है, सुनिश्चित करें कि आप किसी भी एकल उद्धरण से बच कर JSON डेटा

+0

हो सकता है सामग्री में एकल उद्धरण:

उदाहरण के लिए

मैं यह नहीं? – jjmontes

+0

हाँ सुनिश्चित करें कि आप उन्हें से बचें: 'json_encode ($ arr, JSON_HEX_QUOT); ' –

+0

जेएसओएन सामग्री में HTML इकाइयों के बारे में क्या? उदाहरण के लिए, मान = '{"टेक्स्ट": "& amp"}' –

0

आपके इनपुट टैग में, वह मान विशेषता जिसमें आप जेसन सरणी डालने का प्रयास कर रहे हैं। इसे देखो। आप " डाल रहे हैं। दूसरा " विशेषता मान समाप्त कर रहा है। इस प्रकार इसे value = "{" के रूप में व्याख्या किया जा रहा है। आपको उन " से बचने की आवश्यकता है। इसके बजाय एकल उद्धरण ' का उपयोग करें। और फिर

+0

सिंगल कोट्स मान्य JSON स्ट्रिंग delimiters मान्य नहीं हैं, मुझे लगता है। – jjmontes

-2

व्यक्तिगत रूप से, मुझे JSON मान के साथ HTML इनपुट टैग में डबल कोट्स की एक ही समस्या का सामना करना पड़ता है। जेएसओएन फॉर्मेट में आपके द्वारा बनाए गए सरणी की तरह ही कई डबल कोट्स होते हैं। यह मुझे अंत में "{" "मूल्य परिणाम प्रदान करता है।

हालांकि, मुझे इस समस्या को हल करने का एक बहुत ही आसान तरीका मिला। यह चाल डबल कोट्स के बजाय सिंगल कोट का उपयोग कर रही है। उदाहरण के लिए जेएसपी में उदाहरण लें:

JSON जो इस मामले में कई दोहरे उद्धरण चिह्नों में शामिल है
<input type="checkbox" name="deviceInfo" value='${deviceRow}'> 

$ {deviceRow} है। मैं फ़ायरबग का इस्तेमाल किया है इनपुट टैग के परिणामों की जांच के लिए, यह सही काम किया।

Results

+0

यह सार्वभौमिक समाधान नहीं है, क्योंकि "JSON में कानूनी char है और आपका JSON डेटा इस तरह दिख सकता है:' {"msg" : "क्या हो रहा है?"} ', और यह फिर से एचटीएमएल पार्सर को दुर्घटनाग्रस्त कर देगा। – s3m3n

+0

इसके अलावा, HTML/XML को विशेषता मानों को लपेटने के लिए डबल कोट्स की आवश्यकता होती है। एक HTML टैग के अंदर एकल कोट्स का उपयोग करना गलत है (हालांकि पिछली संगतता कारणों के लिए ब्राउज़र द्वारा स्वीकार किया जाता है)। – jjmontes

2

सबसे अच्छा तरीका है मेरे लिए एचटीएमएलका उपयोग करना थाquot;

<input type="hidden" id="v" value="[{&quot;id&quot;:&quot;1&quot;}]" > 

बजाय

<input type="hidden" id="v" value="[{"id":"1"}]" > 
संबंधित मुद्दे