Question

我很难理解为什么它不起作用。我的.json文件是正确的但我无法提取数据以在Html上显示它们。

weather.js：

$(document).ready(function() {
    $.ajax({
        url: "weather.json",
        type: "GET",
        dataType: "json", // Returns JSON
        success: function(response) {
            var sTxt = '';
            $.each(response.weather, function(index) {
                sTxt += '<tr><td>' + response.weather[index].name + '</td></tr>';
            });
            $('#weatherlist').append(sTxt);
        },
        error: function() {
            $('#info').html('<p>An error has occurred</p>');
        }
    });
});

weather.html：

<!DOCTYPE html>
<html>
<head>
    <title>Ajax and json Data</title>
    <meta charset="UTF-8">
    <script src="weather.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>British and Irish Counties - Weather Data</h1>
    </header>
    <section>
        <table id="weatherlist">
        </table>
        <div id="updatemessage"></div>
    </section>
    <footer>
    </footer>
</body>
</html>

这是新的Html，在现有的之前，我仍然有一个错误：jquery.min.js：4 XMLHttpRequest无法加载file：/// C：/Users/jull/Desktop/weather.json。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

<!DOCTYPE html>
<html>
<head>
    <title>Ajax and json Data</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="weather.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <header>
        <h1>British and Irish Counties - Weather Data</h1>
    </header>
    <section>
        <table id="weatherlist">
        </table>
        <div id="updatemessage"></div>
    </section>
    <footer>
    </footer>
</body>
</html>

Answer 1

打开浏览器的开发人员工具。查看控制台。它会说：

未捕获的ReferenceError：$未定义

您正在尝试使用jQuery，但尚未包含它。

添加另一个脚本元素（在您已经拥有的脚本元素之前）并使用它来加载the jQuery library。

Answer 2

You have to use 

JSON.parse(response)

如何将jquery ajax数据提取到html？

2 个答案: