使用javascript / jquery从API获取Json响应

Question

我是javascript和jquery的新手，并且在使用jquery解析json时遇到问题。 我正在使用开放天气最简单的API来获取天气信息，但没有任何反应。 如果我将json硬编码在任何文件或脚本中，则可以正常工作，但是一旦我使用API的URL，它就会停止显示结果。

这是我完整的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    function myFunction() {
        var path = "api.openweathermap.org/data/2.5/weather?q=Lahore,pk";
        $(document).ready(function () {
            $("button").click(function () {
                $.getJSON(path, function (data) {
                    $.each(result, function (i, field) {
                        $("div").append(field + " ");
                    });
                });
            });
        });
    }
</script>
</head>
<body>

<button onclick="myFunction()">Get JSON data</button>

<div></div>

</body>
</html>

Answer 1

遍历JSON结果，即。 您的data ：

工作代码：

<button>Get JSON data</button>
<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    var path = "http://api.openweathermap.org/data/2.5/weather?q=Lahore,pk";
        $(document).ready(function () {
            $("button").click(function () {
                $.getJSON(path, function (data) {
                    $.each(data, function (i, field) {
                        $("div").append(JSON.stringify(field)); // parse the object according to your need.
                    });
                });
            });
        });
</script>

Answer 2

您犯了多个错误。 这是一个工作的小提琴：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">    </script>
</head>
<body>

<button id="myButton">Get JSON data</button>

<div id="mydiv"></div>

</body>
<script>
$("#myButton").click(function(){
    var path = "http://api.openweathermap.org/data/2.5/weather?q=Lahore,pk";
    $.getJSON(path, function (data) {
        $.each(data, function (i, field) {
            var textNode = document.createTextNode(i+ " " +JSON.stringify(field));
            $("#mydiv").append(textNode);
        });
    });
});
</script>

例

如果您需要更多信息，请写评论。

使用javascript / jquery从API获取Json响应

问题描述

2 个解决方案

解决方案1
1 2015-04-17 07:14:10

解决方案2
1 已采纳 2015-04-17 07:28:06

使用javascript / jquery从API获取Json响应

问题描述

2 个解决方案

解决方案1 1 2015-04-17 07:14:10

解决方案2 1 已采纳 2015-04-17 07:28:06

解决方案1
1 2015-04-17 07:14:10

解决方案2
1 已采纳 2015-04-17 07:28:06