Question

我想做一个简单的点击按钮功能，它从openweathermap API加载数据并在点击按钮时显示。我尝试使用getJSON和getJSONP，但数据没有显示出来。这是我的JS代码：

function clicck(){
    var url="http://api.openweathermap.org/data/2.5/weather?q=pune&APPID=998ccd9a6bca814795a4815ec5ea7c89";
  //  document.getElementById("demo").innerHTML=url;
    $.getJSONP(url,function(a){
      ("demo").html(JSON.stringify(a));
    });
  }

按钮的HTML代码是：

<p id="demo"></p>
<button onclick="clicck()">kuyku
</button>

我知道这是一个基本问题，但我真的很困惑。你的帮助将不胜感激。

Answer 1

相当确定您的问题是在收到数据后定位您尝试更新的元素。

$('#demo').html(...)

将使用id“demo”定位元素，并根据输入更新它的html。

Answer 2

我尝试了你的解决方案，并发现了JSONP功能的问题。如果提供的拼写错误的选择器$('#demo')的解决方案不起作用，则此处fiddle仅使用jQuery ajax函数。

如果来自https的http呼叫有问题。请检查我上传到我的服务器的解决方案。您可以查看here

完整代码：

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf8">
        <title>Weather app</title>
    </head>
    <body>
        <style>
            h1{
              text-align:center;
              font-size:30px;
            }
        </style>
        <h1>
      <u> Weather App</u>
    </h1>
    <button>kuyku
    </button>
      <p id="demo">location is:</p>

      <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
      <script>
      var url="http://api.openweathermap.org/data/2.5/weather?q=pune&APPID=998ccd9a6bca814795a4815ec5ea7c89";
    $('button').click(function() {
    console.log("here");
        $.getJSON( url, function( data ) {
          $("#demo").html(JSON.stringify(data));
        });
    });
    </script>
    </body>
    </html>

here您希望在html中使用onclick属性获得的版本。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf8">
        <title>Weather app</title>
    </head>
    <body>
        <style>
            h1{
              text-align:center;
              font-size:30px;
            }
        </style>
        <h1>
      <u> Weather App</u>
    </h1>
    <button onclick="loadData()">kuyku</button>
      <p id="demo">location is:</p>

      <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
      <script>
      var url="http://api.openweathermap.org/data/2.5/weather?q=pune&APPID=998ccd9a6bca814795a4815ec5ea7c89";
    var loadData = function() {
    console.log("here");
        $.getJSON( url, function( data ) {
          $("#demo").html(JSON.stringify(data));
        });
    };
    </script>
    </body>
    </html>

为什么即使在使用getJSON调用后API数据也未加载？

2 个答案: