HTML / Javascript: วิธีเข้าถึงข้อมูล JSON ที่โหลดในแท็กสคริปต์ด้วยชุด src

ฉันมีไฟล์ JSON ที่ฉันสร้างในเซิร์ฟเวอร์ที่ฉันต้องการให้เข้าถึงได้บนไคลเอนต์เนื่องจากสามารถดูเพจได้ โดยพื้นฐานแล้วสิ่งที่ฉันต้องการบรรลุคือ:

ฉันมีแท็กต่อไปนี้ที่ประกาศในเอกสาร html ของฉัน:

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

ไฟล์ที่อ้างถึงในแหล่งที่มามีข้อมูล JSON อย่างที่ฉันเห็นมีการดาวน์โหลดข้อมูลเช่นเดียวกับที่เกิดขึ้นกับสคริปต์

ตอนนี้ฉันจะเข้าถึงใน Javascript ได้อย่างไร ฉันได้พยายามเข้าถึงแท็กสคริปต์ทั้งที่มีและไม่มี jQuery โดยใช้วิธีการมากมายเพื่อพยายามรับข้อมูล JSON ของฉัน แต่ก็ไม่ได้ผล การใช้งานinnerHTMLจะได้ผลหากข้อมูล json ถูกเขียนแบบอินไลน์ในสคริปต์ ซึ่งมันไม่ใช่และไม่ใช่สิ่งที่ฉันพยายามจะบรรลุ

คำขอ JSON ระยะไกลหลังจากโหลดหน้าไม่ใช่ตัวเลือกในกรณีที่คุณต้องการแนะนำเช่นนั้น

คุณไม่สามารถโหลด 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>

... พูดง่ายๆก็คือแท็กสคริปต์ถูก "ทำร้าย" ในฐานะผู้ถือข้อมูล คุณสามารถทำได้กับข้อมูลทุกประเภท ยกตัวอย่างเช่นจำนวนมากของแท็กสคริปต์เครื่องมือ templating ใช้ประโยชน์ในการถือแม่

คุณมีรายการตัวเลือกสั้น ๆ ในการโหลด JSON ของคุณจากไฟล์ระยะไกล:

1. ใช้$.get('your.json')หรือวิธี AJAX อื่น ๆ
2. เขียนไฟล์ที่ตั้งค่าตัวแปรส่วนกลางเป็น json ของคุณ (ดูเหมือนฮ็อกกี้)
3. ดึงเข้าใน iframe ที่มองไม่เห็นจากนั้นขูดเนื้อหาหลังจากโหลดเสร็จแล้ว (ฉันเรียกโหมดนี้ว่า "1997 mode")
4. ปรึกษานักบวชลัทธิวูดู

จุดสุดท้าย:

คำขอ JSON ระยะไกลหลังจากโหลดหน้าก็ไม่ใช่ตัวเลือกในกรณีที่คุณต้องการแนะนำเช่นนั้น

... นั่นไม่สมเหตุสมผลเลย ความแตกต่างระหว่างคำขอ AJAX และคำขอที่เบราว์เซอร์ส่งมาในขณะประมวลผลของคุณ<script src="">นั้นไม่มีอะไรเลย ทั้งคู่จะทำ GET กับทรัพยากร HTTP ไม่สนใจว่าจะทำเพราะแท็กสคริปต์หรือการเรียก AJAX และเซิร์ฟเวอร์ของคุณก็ไม่ได้เช่นกัน

อีกวิธีหนึ่งคือการใช้ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์และรวม 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 ลงใน JavaScript โดยตรง:

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

ข้อดีของโซลูชันที่มีแท็กพิเศษคือโค้ด JavaScript และข้อมูล JSON จะถูกแยกออกจากกัน

ดูเหมือนว่าเป็นไปไม่ได้หรืออย่างน้อยก็ไม่รองรับ

จากข้อกำหนด HTML5 :

เมื่อใช้เพื่อรวมบล็อกข้อมูล (ซึ่งตรงข้ามกับสคริปต์) ข้อมูลจะต้องฝังอยู่ในบรรทัดรูปแบบของข้อมูลต้องกำหนดโดยใช้แอตทริบิวต์ type ไม่ต้องระบุแอตทริบิวต์ srcและเนื้อหาขององค์ประกอบสคริปต์ต้องเป็นไปตาม ตามข้อกำหนดที่กำหนดไว้สำหรับรูปแบบที่ใช้

แม้ว่าในปัจจุบันจะใช้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>

หากต้องการใช้ข้างต้นเพียงแค่แทนที่idand srcattribute ด้วยสิ่งที่คุณต้องการ id(ซึ่งเราจะสมมติในสถานการณ์เช่นนี้เท่ากับmySpecialId) จะถูกนำมาใช้ในการจัดเก็บข้อมูลwindow.jsonData["mySpecialId"]ใน

กล่าวอีกนัยหนึ่งสำหรับ iframe ทุกตัวที่มีidและใช้onloadสคริปต์จะมีการโหลดข้อมูลนั้นพร้อมกันลงในwindow.jsonDataวัตถุภายใต้ที่idระบุ

ฉันทำสิ่งนี้เพื่อความสนุกสนานและเพื่อแสดงให้เห็นว่า "เป็นไปได้" แต่ฉันไม่แนะนำให้ใช้

นี่คือทางเลือกที่ใช้การโทรกลับแทน

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

ผ่านการทดสอบใน chrome และควรทำงานใน firefox ไม่แน่ใจเกี่ยวกับ IE หรือ Safari

ฉันเห็นด้วยกับเบ็น คุณไม่สามารถโหลด / นำเข้าไฟล์ JSON แบบธรรมดา

แต่ถ้าคุณต้องการทำอย่างนั้นและมีความยืดหยุ่นในการอัปเดตไฟล์ json คุณสามารถทำได้

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

ตรวจสอบคำตอบนี้: https://stackoverflow.com/a/7346598/1764509

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

หากคุณต้องการโหลด JSON จากโดเมนอื่น: http://en.wikipedia.org/wiki/JSONP
อย่างไรก็ตามโปรดระวังการโจมตี XSSI ที่อาจเกิดขึ้น: https://www.scip.ch/en/?labs.20160414

หากเป็นโดเมนเดียวกันให้ใช้ Ajax

วางสิ่งนี้ในไฟล์สคริปต์ของคุณ json-content.js

var mainjson = { your json data}

จากนั้นเรียกใช้จากแท็กสคริปต์

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

จากนั้นคุณสามารถใช้ในสคริปต์ถัดไป

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

อีกทางเลือกหนึ่งในการใช้ json ที่แน่นอนภายใน javascript เนื่องจากเป็น Javascript Object Notation คุณสามารถสร้างวัตถุของคุณได้โดยตรงด้วยสัญกรณ์ json หากคุณเก็บสิ่งนี้ไว้ในไฟล์. js คุณสามารถใช้วัตถุในแอปพลิเคชันของคุณได้ นี่เป็นตัวเลือกที่มีประโยชน์สำหรับฉันเมื่อฉันมีข้อมูล json แบบคงที่ซึ่งฉันต้องการแคชในไฟล์แยกจากแอพอื่น ๆ ของฉัน

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