HTML / Javascript: cách truy cập dữ liệu JSON được tải trong thẻ script với bộ src

Tôi có tệp JSON này mà tôi tạo trong máy chủ mà tôi muốn làm cho máy khách có thể truy cập được vì trang có thể xem được. Về cơ bản những gì tôi muốn đạt được là:

Tôi có thẻ sau được khai báo trong tài liệu html của mình:

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

Tệp được giới thiệu trong nguồn của nó có dữ liệu JSON. Như tôi đã thấy, dữ liệu đã được tải xuống, giống như nó xảy ra với các tập lệnh.

Bây giờ, làm cách nào để truy cập nó trong Javascript? Tôi đã thử truy cập thẻ script, có và không có jQuery, sử dụng vô số phương pháp để cố gắng lấy dữ liệu JSON của mình, nhưng bằng cách nào đó điều này không hoạt động. Bắt nó innerHTMLsẽ hoạt động nếu dữ liệu json được viết nội tuyến trong tập lệnh. Đó không phải là điều mà tôi đang cố gắng đạt được.

Yêu cầu JSON từ xa sau khi tải trang cũng không phải là một tùy chọn, trong trường hợp bạn muốn đề xuất điều đó.

Bạn không thể tải JSON như vậy, xin lỗi.

Tôi biết bạn đang nghĩ "tại sao tôi không thể sử dụng srcở đây? Tôi đã thấy những thứ như thế này ...":

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

... hay nói một cách đơn giản, đó chỉ là thẻ script bị "lạm dụng" như một người giữ dữ liệu. Bạn có thể làm điều đó với tất cả các loại dữ liệu. Ví dụ: rất nhiều công cụ tạo mẫu tận dụng các thẻ script để giữ các mẫu .

Bạn có một danh sách ngắn các tùy chọn để tải JSON của mình từ một tệp từ xa:

1. Sử dụng $.get('your.json')hoặc một số phương pháp AJAX khác.
2. Viết một tệp đặt một biến toàn cục cho json của bạn. (có vẻ hokey).
3. Kéo nó vào một iframe vô hình, sau đó quét nội dung của nó sau khi nó được tải (tôi gọi đây là "chế độ 1997")
4. Tham khảo ý kiến ​​của một thầy tu voodoo.

Điểm cuối cùng:

Yêu cầu JSON từ xa sau khi tải trang cũng không phải là một tùy chọn, trong trường hợp bạn muốn đề xuất điều đó.

... điều đó không có ý nghĩa. Sự khác biệt giữa một yêu cầu AJAX và một yêu cầu được gửi bởi trình duyệt trong khi xử lý của bạn <script src="">về cơ bản là không có gì. Cả hai đều sẽ thực hiện GET trên tài nguyên. HTTP không quan tâm nếu nó được thực hiện vì thẻ script hay lệnh gọi AJAX và máy chủ của bạn cũng vậy.

Một giải pháp khác là sử dụng ngôn ngữ kịch bản phía máy chủ và chỉ cần đưa vào nội tuyến dữ liệu json. Đây là một ví dụ sử dụng PHP:

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

Ví dụ trên sử dụng một thẻ script bổ sung với type application/json. Một giải pháp đơn giản hơn nữa là đưa JSON trực tiếp vào JavaScript:

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

Ưu điểm của giải pháp với thẻ phụ là mã JavaScript và dữ liệu JSON được giữ tách biệt với nhau.

Có vẻ như điều này là không thể, hoặc ít nhất là không được hỗ trợ.

Từ đặc tả HTML5 :

Khi được sử dụng để bao gồm các khối dữ liệu (trái ngược với tập lệnh), dữ liệu phải được nhúng nội tuyến , định dạng của dữ liệu phải được cung cấp bằng thuộc tính type, thuộc tính src không được chỉ định và nội dung của phần tử tập lệnh phải phù hợp các yêu cầu được xác định cho định dạng được sử dụng.

Mặc dù hiện tại không thể thực hiện được với scriptthẻ, nhưng có thể xảy ra với thẻ nếu thẻ iframetừ cùng một miền.

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

Để sử dụng ở trên, chỉ cần thay thế thuộc tính idvà srcbằng những gì bạn cần. Các id(mà chúng tôi sẽ giả trong tình huống này là bằng mySpecialId) sẽ được sử dụng để lưu trữ các dữ liệu trong window.jsonData["mySpecialId"].

Nói cách khác, đối với mọi iframe có idvà sử dụng onloadtập lệnh sẽ có dữ liệu đó được tải đồng bộ vào window.jsonDatađối tượng theo idchỉ định.

Tôi đã làm điều này cho vui và để chứng tỏ rằng nó "có thể" nhưng tôi không khuyên bạn nên sử dụng nó.

Đây là một giải pháp thay thế sử dụng một cuộc gọi lại.

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

Đã thử nghiệm trong chrome và sẽ hoạt động trong firefox. Không chắc chắn về IE hoặc Safari.

Tôi đồng ý với Ben. Bạn không thể tải / nhập tệp JSON đơn giản.

Nhưng nếu bạn hoàn toàn muốn làm điều đó và có thể linh hoạt cập nhật tệp json, bạn có thể

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>

Kiểm tra câu trả lời sau: https://stackoverflow.com/a/7346598/1764509

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

Nếu bạn cần tải JSON từ một miền khác: http://en.wikipedia.org/wiki/JSONP
Tuy nhiên, hãy lưu ý các cuộc tấn công XSSI tiềm ẩn: https://www.scip.ch/vi/?labs.20160414

Nếu đó là cùng một miền thì chỉ cần sử dụng Ajax.

đặt một cái gì đó như thế này trong tệp kịch bản của bạn json-content.js

var mainjson = { your json data}

sau đó gọi nó từ thẻ script

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

thì bạn có thể sử dụng nó trong tập lệnh tiếp theo

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

Một thay thế khác để sử dụng json chính xác trong javascript. Vì nó là Ký hiệu đối tượng Javascript, bạn chỉ có thể tạo đối tượng của mình trực tiếp bằng ký hiệu json. Nếu bạn lưu trữ tệp này trong tệp .js, bạn có thể sử dụng đối tượng này trong ứng dụng của mình. Đây là một tùy chọn hữu ích cho tôi khi tôi có một số dữ liệu json tĩnh mà tôi muốn lưu vào bộ nhớ cache trong một tệp riêng biệt với phần còn lại của ứng dụng của mình.

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