getJSON呼び出しの後でもAPIデータがロードされないのはなぜですか？

openweathermap APIからデータを読み込んでボタンクリックで表示する、単純なクリックボタン機能を使いたいです。私はgetJSONとgetJSONPを同じものにしようとしましたが、データは表示されません。私はその、基本的な質問を知っているが、it.Yourの助けをいただければ幸いに、私は本当に立ち往生していますgetJSON呼び出しの後でもAPIデータがロードされないのはなぜですか？

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

：ボタンの

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コードは次のとおりです。はここに私のJSコードです。

出典

2017-06-11 Rohan Akut

idデモで要素をターゲティングし、htmlを変更することを意味しましたか？そうであれば、$（ '＃demo'）を実行する必要があります.html（...） – Shadowfool

'$ .getJSONP（）'のようなメソッドはありません... jquery api docsを参照してください – charlietfl

-1

解決策を試してみましたが、JSONP機能に問題があります。スペルの間違いのセレクタ$('#demo')で解決できない場合は、fiddleここではjQuery ajax関数のみを使用しています。

httpsからhttpコールに問題がある場合。私のサーバーにアップロードするソリューションをチェックしてください。

<!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属性でachiveしたかったバージョン：あなたは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 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>

出典

2017-06-11 22:53:24

私は私が使っていなかったことを理解しました'#demo'は結果を出力していますが、HTMLで使用していたonclick関数に問題はありますか？私はonclick関数を使ってフィーリングを実行しようとしましたが、コードが失敗します。 –

Jsfiddleには、HTMLコードでonclick関数を実行する際に問題があります。 onclickに問題はありません。これは、onclickで次のようになります。 function clicck（）{ $ .get（URL、function（data）{ $（ "＃demo"）.html（JSON.stringify（data））; }} ; } ' –

jsfiddleはonclickを使用しても問題ありません...あなたがフィドルを正しく設定した場合 – charlietfl

あなたの問題は、データを受け取った後に更新しようとしている要素を対象とすることにあります。

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

は、id 'demo'で要素をターゲットにし、入力に基づいてそのHTMLを更新します。

出典

2017-06-11 22:49:23 Shadowfool

コードはまだAPIのコンテンツを表示していません。 –

Andrzejがデモを公開しました。あなたの問題は要素のターゲティングと、データを取得するために使用している方法の両方で問題になっています。 – Shadowfool

Thanx aaron。私がHTMLで使ったonclick関数が間違っているのか、それとも構文が間違っていますか？ –

getJSON呼び出しの後でもAPIデータがロードされないのはなぜですか？

答えて

関連する問題