変更された現在のロケーションリクエストコード（JS/jQuery）が機能しないのはなぜですか？

私は第1のコードがなぜ機能するのかを理解しようとしていますが、第2のコードは動作しません。私はjQueryとJavascript全体では控えめですが、この "$（ '＃location'）.html（...）の部分に要素に 'location' idが設定されているという印象を受けました。そうすれば、リクエストの結果が割り当てられる変数を作成した場合、 "$（ '＃location'）.html（variable）"があれば同じ仕事をするでしょう。何がありますか？ここで変更された現在のロケーションリクエストコード（JS/jQuery）が機能しないのはなぜですか？

2つのコードです：

最初のコード（これは動作します）

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Current Position</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    </head> 
    <body > 
    <div>Location: <span id="location"></span></div> 
    <script> 
     $.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?') 
     .done (function(location) { 
      $('#location').html(location.city + ", " + location.state + " (" + location.country_name + ")");    
     }); 
    </script> 
    </body> 
</html>

第二の符号（この1つはない）

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Current Position</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    </head> 
    <body > 
    <div>Location: <span id="location"></span></div> 
    <script> 
     var currentLocation = $.getJSON('https://geoip-db.com/json/geoip.php?jsonp=?') 
     .done (function(location) { 
      location.city + ", " + location.state + " (" + location.country_name + ")";    
     }); 

     $('#location').html(currentLocation); 
    </script> 
    </body> 
</html>

出典

2017-02-17 Collins Orlando

ありがとうございました。 –

ようこそ。 –

$.getJson戻っaは、種類はpromiseであり、リクエスト自体の値ではありません。その結果を変数に代入しても、結果が得られません。これは、ほとんどの非同期処理が動作する方法です。コードがまだ正常に実行されていないため、非同期呼び出しの結果をそのように割り当てることはできません。

最初のコードは、に行く正しい方法です。

// Do some *asynchrounous* request 
const promise = $.getJson(...arguments...) 

// Create a handler funcion or "callback" 
const handler = function(value) { console.log(value) } 

// Tell the promise to call this function when it get's resolved 
promise.done(handler);

約束事には、複数のハンドラを取り付けることができるなど、いくつかの重大な利点があります。

$.getJson(...) 
    .done(doStuffA) 
    .done(doStuffB) 
    .catch(handleError)

出典

2017-02-17 18:05:30 nicooga

私は参照してください。ご説明ありがとうございます。 –

変更された現在のロケーションリクエストコード（JS/jQuery）が機能しないのはなぜですか？

答えて

関連する問題