0

!!! 以下の質問は、Andrew Whitaker の回答 (素晴らしい例) によって回答されています。基本的に、$.getJSON(..) を使用して、YQL などのサービスから JSON データをプログラムで取得できます。ただし、このサービスは別のドメインに関連付けることができます (つまり、ページの読み込み元と同じドメインによって提供されていません)。 . 通常、このようなリクエストを別のドメインに送信することはできないため、HTML が動的に生成されて DOM に挿入され、新しいクロスドメイン スクリプトが取得されて実行されるリクエストを実装する際に「トリック」が使用されます。返されたスクリプトを実行すると、一緒に運ばれる JSON が処理され、提供されたコールバック関数が呼び出されます。この手法は、返されたスクリプトをやみくもに実行するため、セキュリティ上の問題に注意する必要があります (おそらくスクリプトをロードする場合と同様です)。クロスドメイン機能を有効にするには、提供された getJSON URL にオプション「?callback=?」を含めることが重要です。これは、JSONP クロスドメイン呼び出しを使用するシグナルとして jQuery によって選択され、削除/変更されます。技術。JSON データを返すこの方法は、JSONP のサーバー側サポートに依存していることに注意してください。すべての助けをありがとう。!!!

次のコードは、YQL に送信され、IBM の現在の株価を取得します (例として)。これは問題なく動作し、その URL が効果的に JSON データの動的生成を引き起こすスクリプト ファイルをロードすることによってそのタスクを実行します。ロードおよび実行時に、'top_stories' が実行され、価格が抽出されます。ただし、AJAX 呼び出し ($.getJSON(..)) に基づいてこのプロセスを作成したいと思います。ここでは、以下のスクリプト ベースの例から URL コンポーネントとデータ コンポーネントを分離すると想定しています。私は成功せずに多くのバリエーションを試しました - $.getJSON(..) コールを呼び出してコールバック関数を呼び出すことができないようです。任意の考えをいただければ幸いです。...エリック

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
  <head><title>YQL</title>
   <style type='text/css'>
    #results{ width: 40%; margin-left: 30%; border: 1px solid gray; padding: 5px; height: 200px; overflow: auto; } 
  </style>
  <script type='text/javascript'>
  // Parses returned response 
  function top_stories(o) {
      var price = o.query.results.xml_api_reply.finance.last.data;
      alert("last = " + price);
      // Place price in div tag
      document.getElementById('results').innerHTML = price;
  }
</script>
</head>
<body>
   <!-- Div tag for stories results -->
   <div id='results'></div>
   <!-- The YQL statment will be assigned to src. -->
   <script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20google.igoogle.stock%20where%20stock%3D'ibm'%3B&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=top_stories"></script>   
 </body>
</html>
4

2 に答える 2

0

これがあなたの意図したものかどうかはわかりませんが、クエリ文字列パラメーターを「データ」オブジェクトに分割する方法は次のとおりです。

$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
    q: "select * from google.igoogle.stock where stock='ibm'",
    format: 'json',
    diagnostics: true,
    env: 'store://datatables.org/alltableswithkeys'
}, top_stories);

例: http://jsfiddle.net/dcXjk/1/

余談ですが、とにかく jQuery を使用している場合は、次のよう.htmlに直接代入する代わりに使用できinnerHTMLます。

function top_stories(o) {
    var price = o.query.results.xml_api_reply.finance.last.data;
    alert("last = " + price);
    // Place price in div tag
    $("#results").html(price);
}

株式記号も渡すことができる、より肉付けされた例を次に示します。

JavaScript:

function top_stories(o, symbol) {
    var price = o.query.results.xml_api_reply.finance.last.data;

    // Place price in div tag
    $("#" + symbol).html(price);
}

function getStockValue(symbol) {
    $.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
        q: "select * from google.igoogle.stock where stock='" + symbol + "'",
        format: 'json',
        diagnostics: true,
        env: 'store://datatables.org/alltableswithkeys'
    }, function(data) {
        top_stories(data, symbol);
    });
}


$(function() {
    getStockValue("ibm");
    getStockValue("nflx");
    getStockValue("msft");
});

HTML:

<p>IBM:</p><div id="ibm"></div>
<p>Netflix:</p><div id="nflx"></div>
<p>Microsoft:</p><div id="msft"></div>

例: http://jsfiddle.net/B3L4p/1/

于 2012-07-17T00:24:00.550 に答える
0

作業コードは次のとおりです。

    $(function () {
    var ticker = "IBM";
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D'"+ticker+"'&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
    $.getJSON(url, function(data) {
      var items = [];
      $.each(data.query.results.quote, function(key, val) {
        if(key == "ChangePercentRealtime" || key == "LastTradeRealtimeWithTime") { items.push(val)};
      });
        $("#nameOfDiv1").html(items[0].substr(9));
        $("#nameOfDiv2").html(items[1].substr(6));
    });
});

substr() は、返された結果から実際のデータを取得します。これには、役に立たないものが含まれています。それをいくつかのhtml divに入れます。明らかに必要な結果セットを選択できます。それがあなたを助けることを願っています!

于 2012-07-17T00:20:13.017 に答える