嘗試將json文件直接加載到HTML中並通過javascript讀取其內容

Question

在面試中，我不得不通過javascript閱讀json文件。

json文件幾乎是這樣的：

{ apple: {price: 1}, banana: {price: 2} }

我有一些解決方案，例如：

1. 通過ajax方法閱讀
2. 修改json文件，例如“ var json = {apple：{price：1}，banana：{price：2}}”，然后像javascript文件一樣將其加載到HTML中，因此我可以將其讀取為全局變量

但是，當我問面試官時，他給了我一些提示：

1. 使用腳本標簽將json文件加載到html中，如下所示：

   script type="application/json" src="scripts/data.json"

2. 然后通過eval(json)讀取js文件中的數據

我很困惑：如何僅通過將其加載為腳本標簽而不進行修改來訪問數據？

Answer 1

您不能以這種方式這樣做：

HTML / Javascript：如何訪問設置了src的腳本標簽中加載的JSON數據

這是面試官的一個棘手問題嗎？

使用ajax，這是我認為的唯一正確方法。 其他解決方案屬於黑客類別。

另外，如Franco所述，請勿使用eval（），除非您必須支持非常老的瀏覽器且不關心安全性。 請改用JSON.parse（）。 IE8甚至支持它。 調用eval會評估/執行其參數-因此，這是試圖將惡意代碼注入您網站的人的攻擊手段。

Answer 2

您可能對問題的細節記憶不足。

顯然，問題的第一部分涉及Ajax（XmlHttpRequest）。

第二部分可能與JSONP有關，您可以在其中修改服務器輸出，使其看起來更像function(<json data here>) ，其中函數名由客戶端提供給服務器（盡管這實際上是特定於實現的） 。 JSONP在幾年前曾經是一種常見的模式（主要是作為不具有XHR支持的瀏覽器的向后兼容解決方案，但也繞過了跨域限制）。 這些天可能會少很多，因為它存在一些重大的安全問題。 如果您想了解更多信息，請訪問： https : //en.wikipedia.org/wiki/JSONP

JSONP不涉及eval的使用，但具有相同的安全性問題：任何事情都會發生。

Answer 3

您將需要獲取json文件（假設您想通過單擊按鈕來獲取它）：

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("your-json.js", function(result){
            $.each(result, function(i, val){
                //you can do something with your returned data.
            });
        });
    });
});

注意：不要使用eval（），這是一個不好的做法。