如何在我的HTML網頁中使用JSON文件

Question

我正在嘗試在HTML頁面中實現以下JSON文件。

<html>
  <head>
    <title> test get</title>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">

      <script>
        $(function() {
            $.getJSON('json.json',function(data) {
                $.each(data.quotes,function(key,value) {
                    alert( key+ "said by "+value);
                });
            });
        });
    </script>

  </head>

  <body>
  </body>

</html>

這是我正在處理的JSON 。

{
    "quotes": {
        "hey there":"randomguy1",
        "wassup":"randomguy2",
        "coool":"randomguy3"
    }
}

我檢查了不同的教程，並且在stackoverflow上也遇到了類似的問題，但仍然無法弄清錯誤。

Answer 1

只需修復您的script代碼，

您必須關閉<script ...jquery>標簽。

<html>
<head>
    <title>test get</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
    $(function () {
        $.getJSON('json.json', function (data)
        {
            $.each(data.quotes, function (key, value) {
                alert(key + "said by " + value);
            });
        });

    });
  </script>

  </head>

  <body> </body>
</html>

Answer 2

您可以通過其他方式實現它。 使用ajax加載文件內容並將其解析為json 。

$.ajax({
            url : "helloworld.json",
            success : function (data) {
                //TODO parse string to json
            }
        });

如何在我的HTML網頁中使用JSON文件

問題描述

2 個解決方案

解決方案1
2 2016-12-28 06:22:40

解決方案2
0 2016-12-28 06:23:18

如何在我的HTML網頁中使用JSON文件

問題描述

2 個解決方案

解決方案1 2 2016-12-28 06:22:40

解決方案2 0 2016-12-28 06:23:18

解決方案1
2 2016-12-28 06:22:40

解決方案2
0 2016-12-28 06:23:18