HTML / Javascript: cara mengakses data JSON yang dimuat dalam tag script dengan set src

Saya memiliki file JSON yang saya buat di server yang ingin saya jadikan dapat diakses di klien karena halamannya dapat dilihat. Pada dasarnya yang ingin saya capai adalah:

Saya memiliki tag berikut yang dideklarasikan di dokumen html saya:

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

File yang dirujuk dalam sumbernya memiliki data JSON. Seperti yang saya lihat, data telah diunduh, seperti yang terjadi dengan skrip.

Sekarang, bagaimana cara mengaksesnya dalam Javascript? Saya telah mencoba mengakses tag skrip, dengan dan tanpa jQuery, menggunakan banyak metode untuk mencoba mendapatkan data JSON saya, tetapi entah bagaimana ini tidak berhasil. Mendapatkannya innerHTMLakan berhasil seandainya data json ditulis sebaris dalam skrip. Yang bukan dan bukan itu yang ingin saya capai.

Permintaan JSON Jarak Jauh setelah pemuatan halaman juga bukan merupakan opsi, jika Anda ingin menyarankannya.

Anda tidak dapat memuat JSON seperti itu, maaf.

Saya tahu Anda berpikir "mengapa saya tidak bisa saya gunakan di srcsini saja? Saya telah melihat hal-hal seperti ini ...":

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

... sederhananya, itu hanya tag skrip yang "disalahgunakan" sebagai pemegang data. Anda dapat melakukannya dengan semua jenis data. Misalnya, banyak mesin template memanfaatkan tag skrip untuk menampung template .

Anda memiliki daftar opsi singkat untuk memuat JSON Anda dari file jarak jauh:

1. Gunakan $.get('your.json')atau metode AJAX lainnya.
2. Tulis file yang menyetel variabel global ke json Anda. (sepertinya tipu).
3. Tarik ke dalam iframe yang tidak terlihat, lalu kikis kontennya setelah dimuat (saya menyebutnya "mode 1997")
4. Berkonsultasilah dengan pendeta voodoo.

Poin terakhir:

Permintaan JSON Jarak Jauh setelah pemuatan halaman juga bukan merupakan opsi, jika Anda ingin menyarankannya.

... itu tidak masuk akal. Perbedaan antara permintaan AJAX dan permintaan yang dikirim oleh browser saat memproses Anda <script src="">pada dasarnya tidak ada apa-apanya. Mereka berdua akan melakukan GET pada sumber daya. HTTP tidak peduli jika itu dilakukan karena tag skrip atau panggilan AJAX, dan begitu pula server Anda.

Solusi lain adalah dengan menggunakan bahasa skrip sisi server dan cukup memasukkan json-data inline. Berikut contoh yang menggunakan PHP:

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

Contoh di atas menggunakan tag skrip tambahan dengan tipe application/json. Solusi yang lebih sederhana adalah memasukkan JSON langsung ke JavaScript:

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

Keuntungan dari solusi dengan tag tambahan adalah kode JavaScript dan data JSON disimpan terpisah satu sama lain.

Tampaknya ini tidak mungkin, atau setidaknya tidak didukung.

Dari spesifikasi HTML5 :

Saat digunakan untuk menyertakan blok data (sebagai lawan dari skrip), data harus disematkan sebaris , format data harus diberikan menggunakan atribut type, atribut src tidak boleh ditentukan , dan konten elemen skrip harus sesuai dengan persyaratan yang ditentukan untuk format yang digunakan.

Meskipun saat ini tidak memungkinkan dengan scripttag, hal itu dimungkinkan dengan iframejika itu dari domain yang sama.

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

Untuk menggunakan cara di atas, cukup ganti atribut idand srcdengan yang Anda butuhkan. The id(yang akan kita asumsikan dalam situasi ini adalah sama dengan mySpecialId) akan digunakan untuk menyimpan data yang di window.jsonData["mySpecialId"].

Dengan kata lain, untuk setiap iframe yang memiliki iddan menggunakan onloadskrip akan memiliki data yang dimuat secara sinkron ke dalam window.jsonDataobjek di bawah yang idditentukan.

Saya melakukan ini untuk bersenang-senang dan untuk menunjukkan bahwa itu "mungkin 'tetapi saya tidak menganjurkan agar ini digunakan.

Berikut adalah alternatif yang menggunakan callback.

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

Diuji di chrome dan seharusnya berfungsi di firefox. Tidak yakin tentang IE atau Safari.

Saya setuju dengan Ben. Anda tidak dapat memuat / mengimpor file JSON sederhana.

Tetapi jika Anda benar-benar ingin melakukannya dan memiliki fleksibilitas untuk memperbarui file json, Anda bisa

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>

Periksa jawaban ini: https://stackoverflow.com/a/7346598/1764509

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

Jika Anda perlu memuat JSON dari domain lain: http://en.wikipedia.org/wiki/JSONP
Namun waspadai potensi serangan XSSI: https://www.scip.ch/en/?labs.20160414

Kalau domainnya sama ya pakai ajax aja.

tempatkan sesuatu seperti ini di file skrip Anda json-content.js

var mainjson = { your json data}

kemudian menyebutnya dari tag script

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

maka Anda dapat menggunakannya di skrip berikutnya

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

Alternatif lain untuk menggunakan json yang tepat dalam javascript. Karena ini adalah Javascript Object Notation Anda bisa membuat objek Anda langsung dengan notasi json. Jika Anda menyimpannya dalam file .js, Anda dapat menggunakan objek tersebut dalam aplikasi Anda. Ini adalah opsi yang berguna bagi saya ketika saya memiliki beberapa data json statis yang ingin saya cache dalam sebuah file secara terpisah dari aplikasi saya yang lain.

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