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

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，与现有的Html相比，我仍然有一个错误：jquery.min.js：4 XMLHttpRequest无法加载file：/// C：/Users/jull/Desktop/weather.json。 跨源请求仅支持以下协议方案：http，数据，chrome，chrome扩展名，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，但尚未包括它。

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

Answer 2

You have to use 

JSON.parse(response)

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

问题描述

2 个解决方案

解决方案1
4 2016-04-14 13:09:47

解决方案2
1 2016-04-14 13:04:15

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

问题描述

2 个解决方案

解决方案1 4 2016-04-14 13:09:47

解决方案2 1 2016-04-14 13:04:15

解决方案1
4 2016-04-14 13:09:47

解决方案2
1 2016-04-14 13:04:15