獲取JSON文件

我想獲取一個json文件（Steam API）並且想要在一個表中顯示排序的文件。我已經嘗試了一個按鈕和一個列表，但它不起作用。我不知道如何用桌子做這個。（例如：http://carl-keinath.de/json.html）獲取JSON文件

<html> 
<head> 
    <title>JSON</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    $("button").click(function() { 
     $.getJSON("json_data.json", function(obj) { 
      $.each(obj, function(key, value) { 
       $("ul").append("<li>"+value.name+"</li>"); 
      }); 
     }); 
    });; 
</script> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 
</body> 
</html>

來源

2015-02-06 Chris P. Bacon

你的代碼本身很好！但是，當您選擇$("button")時，瀏覽器實際上還沒有處理button標籤，因此在該點不存在，並且click事件未註冊。

解決辦法有兩個：

移動<script>標籤到<body>標籤內結束，在這種情況下<button>將由腳本解析的時間存在。

你可以保持您的<script>標記它在哪裏，但在jQuery's $(document).ready()處理程序，當整個文檔進行分析，準備讀執行其回調函數包住整個腳本：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function() { 
      $.getJSON("json_data.json", function(obj) { 
       $.each(obj, function(key, value) { 
        $("ul").append("<li>"+value.name+"</li>"); 
       }); 
      }); 
     }); 
    }); 
</script>

來源

2015-02-06 10:03:53

謝謝你man！：D – 2015-02-06 10:06:58

由於jQuery代碼是在body，它應該只是之前的</body>標記，這樣所有的元素都可以在DOM訪問。在存在button或ul元素之前，您當前的代碼正在運行。

試試這個：

<html> 
<head> 
    <title>JSON</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
</head> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 

    <script type="text/javascript"> 
     $("button").click(function() { 
      $.getJSON("json_data.json", function(obj) { 
       $.each(obj, function(key, value) { 
        $("ul").append("<li>" + value.name + "</li>"); 
       }); 
      }); 
     }); 
    </script> 
</body> 
</html>

來源

2015-02-06 09:53:25

這文檔就緒函數的作用是：$（function（）{/ * DOM爲所有代碼加載* /}）;' – 2015-02-06 09:57:44

@northkildonan如果腳本在'head'中則適用。在body的最後，所有元素都可以在DOM中使用，所以不需要。 – 2015-02-06 10:03:20

有幫助我！你也是 – 2015-02-06 10:07:26

<html> 
<head> 
    <title>JSON</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("button").click(function() { 
     $.getJSON("json_data.json", function(obj) { 
      $.each(obj, function(key, value) { 
       $("ul").append("<li>"+value.name+"</li>"); 
      }); 
     }); 
    }); 
}); 
</script> 
<body> 
    <ul></ul> 
    <button>Refresh</button> 
</body> 
</html>

與$(function() {包裝一下你的JS - });會等到DOM被執行你的腳本之前加載。

來源

2015-02-06 09:58:50

回答

相關問題