HTML / Javascript: स्क्रिप्ट टैग में लोड किए गए JSON डेटा को src सेट के साथ कैसे एक्सेस करें

Question 1

मेरे पास यह JSON फ़ाइल है जो मैं उस सर्वर में उत्पन्न करता हूं जिसे मैं क्लाइंट पर सुलभ बनाना चाहता हूं क्योंकि पृष्ठ देखने योग्य है। मूल रूप से मैं क्या हासिल करना चाहता हूं:

मेरे HTML दस्तावेज़ में निम्नलिखित टैग घोषित हैं:

<script id="test" type="application/json" src="http://myresources/stuf.json">

इसके स्रोत में निर्दिष्ट फ़ाइल में JSON डेटा है। जैसा कि मैंने देखा है, डेटा डाउनलोड किया गया है, जैसे स्क्रिप्ट के साथ होता है।

अब, मैं इसे जावास्क्रिप्ट में कैसे एक्सेस कर सकता हूं? मैंने jQuery के साथ और उसके बिना, अपने JSON डेटा को प्राप्त करने के लिए कई तरीकों का उपयोग करके स्क्रिप्ट टैग तक पहुँचने की कोशिश की है, लेकिन किसी तरह यह काम नहीं करता है। इसके innerHTMLकाम करने से स्क्रिप्ट में इनलाइन डेटा को लिखा जाता है। यह नहीं था और मैं क्या हासिल करने की कोशिश कर रहा हूँ नहीं है।

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

Question 2

आप उस तरह से JSON लोड नहीं कर सकते, क्षमा करें।

मुझे पता है कि आप सोच रहे हैं "मैं सिर्फ srcयहाँ क्यों नहीं इस्तेमाल कर सकता हूँ ? मैंने इस तरह से सामान देखा है ...":

<script id="myJson" type="application/json">
 { 
   name: 'Foo' 
 }
</script>

<script type="text/javascript">
    $(function() {
        var x = JSON.parse($('#myJson').html());
        alert(x.name); //Foo
     });
</script>

... अच्छी तरह से इसे सीधे शब्दों में कहें, तो यह सिर्फ स्क्रिप्ट टैग "डेटा धारक के रूप में" दुर्व्यवहार किया जा रहा था। आप सभी प्रकार के डेटा के साथ ऐसा कर सकते हैं। उदाहरण के लिए, बहुत सारे टेम्प्लेटिंग इंजन टेम्पलेट पकड़ने के लिए स्क्रिप्ट टैग का लाभ उठाते हैं ।

आपके JSON को दूरस्थ फ़ाइल से लोड करने के लिए आपके पास विकल्पों की एक छोटी सूची है:

$.get('your.json')इस तरह के AJAX विधि का उपयोग करें या कुछ अन्य।
एक फ़ाइल लिखें जो आपके json के लिए एक वैश्विक चर सेट करता है। (लगता है होकी)।
इसे एक अदृश्य iframe में खींचें, फिर लोड होने के बाद उस की सामग्री को खुरचें (मैं इसे "1997 मोड" कहता हूं)
एक वूडू पुजारी से परामर्श करें।

अंतिम बिंदु:

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

... इसका कोई मतलब नहीं है। AJAX अनुरोध और ब्राउज़र द्वारा भेजे गए अनुरोध के बीच का अंतर आपके प्रसंस्करण के दौरान <script src="">आवश्यक रूप से कुछ भी नहीं है। वे दोनों संसाधन पर GET कर रहे होंगे। अगर यह स्क्रिप्ट टैग या AJAX कॉल के कारण किया जाता है, और न ही आपके सर्वर पर HTTP का ध्यान नहीं है।

Question 3

एक अन्य समाधान एक सर्वर-साइड स्क्रिप्टिंग भाषा का उपयोग करना होगा और इसमें केवल json-data इनलाइन को शामिल करना होगा। यहाँ एक उदाहरण है जो PHP का उपयोग करता है:

<script id="data" type="application/json"><?php include('stuff.json'); ?></script>
<script>
var jsonData = JSON.parse(document.getElementById('data').textContent)
</script>

उपरोक्त उदाहरण प्रकार के साथ एक अतिरिक्त स्क्रिप्ट टैग का उपयोग करता है application/json। एक और भी सरल समाधान JSON को सीधे जावास्क्रिप्ट में शामिल करना है:

<script>var jsonData = <?php include('stuff.json');?>;</script>

अतिरिक्त टैग के साथ समाधान का लाभ यह है कि जावास्क्रिप्ट कोड और JSON डेटा को एक दूसरे से अलग रखा जाता है।

Question 4

ऐसा प्रतीत होता है कि यह संभव नहीं है, या कम से कम समर्थित नहीं है।

से एचटीएमएल 5 विनिर्देश :

जब डेटा ब्लॉक (स्क्रिप्ट के विपरीत) शामिल करने के लिए उपयोग किया जाता है , तो डेटा को इनलाइन एम्बेड किया जाना चाहिए , डेटा का प्रारूप टाइप विशेषता का उपयोग करके दिया जाना चाहिए, src विशेषता निर्दिष्ट नहीं होनी चाहिए , और स्क्रिप्ट तत्व की सामग्री के अनुरूप होना चाहिए उपयोग किए गए प्रारूप के लिए परिभाषित आवश्यकताएं।

Question 5

हालांकि यह वर्तमान में scriptटैग के साथ संभव नहीं है , iframeअगर यह उसी डोमेन से है, तो यह संभव है ।

<iframe
id="mySpecialId"
src="/my/link/to/some.json"
onload="(()=>{if(!window.jsonData){window.jsonData={}}try{window.jsonData[this.id]=JSON.parse(this.contentWindow.document.body.textContent.trim())}catch(e){console.warn(e)}this.remove();})();"
onerror="((err)=>console.warn(err))();"
style="display: none;"
></iframe>

इसके बाद के संस्करण का उपयोग करने के लिए बस की जगह idऔर srcआपको क्या चाहिए के साथ विशेषता। id(जो हम इस स्थिति में मान लेंगे के बराबर है mySpecialIdस्टोर करने के लिए इस्तेमाल किया जाएगा) डेटा में window.jsonData["mySpecialId"]।

दूसरे शब्दों में, स्क्रिप्ट idका उपयोग करने वाले प्रत्येक iframe के लिए और onloadउस डेटा को निर्दिष्ट के तहत ऑब्जेक्ट में सिंक्रोनाइज़ किया हुआ डेटा होगा ।window.jsonDataid

मैंने यह मज़े के लिए किया और यह दिखाने के लिए कि यह "संभव 'है, लेकिन मैं यह सलाह नहीं देता कि इसका उपयोग किया जाए।

यहां एक विकल्प है जो कॉलबैक का उपयोग करता है।

<script>
    function someCallback(data){
        /** do something with data */
        console.log(data);

    }
    function jsonOnLoad(callback){
        const raw = this.contentWindow.document.body.textContent.trim();
        try {
          const data = JSON.parse(raw);
          /** do something with data */
          callback(data);
        }catch(e){
          console.warn(e.message);
        }
        this.remove();
    }
</script>
<!-- I frame with src pointing to json file on server, onload we apply "this" to have the iframe context, display none as we don't want to show the iframe -->
<iframe src="your/link/to/some.json" onload="jsonOnLoad.apply(this, someCallback)" style="display: none;"></iframe>

क्रोम में परीक्षण किया और फ़ायरफ़ॉक्स में काम करना चाहिए। IE या सफारी के बारे में अनिश्चित।

Question 6

मैं बेन से सहमत हूं। आप साधारण JSON फ़ाइल को लोड / आयात नहीं कर सकते।

लेकिन अगर आप बिल्कुल ऐसा करना चाहते हैं और आपके पास json फाइल को अपडेट करने के लिए लचीलापन है, तो आप ऐसा कर सकते हैं

मेरी-json.js

   var myJSON = {
      id: "12ws",
      name: "smith"
    }

index.html

<head>
  <script src="my-json.js"></script>
</head>
<body onload="document.getElementById('json-holder').innerHTML = JSON.stringify(myJSON);">
  <div id="json-holder"></div>
</body>

Question 7

इस उत्तर की जाँच करें: https://stackoverflow.com/a/7346598/1764509

$.getJSON("test.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});

Question 8

यदि आपको JSON को किसी अन्य डोमेन से लोड करने की आवश्यकता है: http://en.wikipedia.org/wiki/JSONP
हालांकि संभावित XSSI हमलों से अवगत रहें: https://www.scip.ch/en/?labs.20160414

यदि यह एक ही डोमेन है तो सिर्फ अजाक्स का उपयोग करें।

Question 9

अपनी स्क्रिप्ट फ़ाइल में कुछ इस तरह रखें json-content.js

var mainjson = { your json data}

फिर इसे स्क्रिप्ट टैग से कॉल करें

<script src="json-content.js"></script>

फिर आप इसे अगली स्क्रिप्ट में उपयोग कर सकते हैं

<script>
console.log(mainjson)
</script>

Question 10

जावास्क्रिप्ट के भीतर सटीक json का उपयोग करने के लिए एक और विकल्प। जैसा कि यह जावास्क्रिप्ट ऑब्जेक्ट नोटेशन है आप सीधे ज्यूस नोटेशन के साथ अपनी वस्तु बना सकते हैं। यदि आप इसे .js फ़ाइल में संग्रहीत करते हैं, तो आप अपने एप्लिकेशन में ऑब्जेक्ट का उपयोग कर सकते हैं। मेरे लिए यह एक उपयोगी विकल्प था जब मेरे पास कुछ स्थिर जोंस डेटा थे जो मैं अपने बाकी ऐप से अलग फ़ाइल में कैश करना चाहता था।

    //Just hard code json directly within JS
    //here I create an object CLC that represents the json!
    $scope.CLC = {
        "ContentLayouts": [
            {
                "ContentLayoutID": 1,
                "ContentLayoutTitle": "Right",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/right.png",
                "ContentLayoutIndex": 0,
                "IsDefault": true
            },
            {
                "ContentLayoutID": 2,
                "ContentLayoutTitle": "Bottom",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/bottom.png",
                "ContentLayoutIndex": 1,
                "IsDefault": false
            },
            {
                "ContentLayoutID": 3,
                "ContentLayoutTitle": "Top",
                "ContentLayoutImageUrl": "/Wasabi/Common/gfx/layout/top.png",
                "ContentLayoutIndex": 2,
                "IsDefault": false
            }
        ]
    };