如何綁定腳本中的值並將其輸出到Html

如何將json值綁定到腳本並在html中需要輸出。我嘗試獲取天氣的數據和圖像，但沒有解決方案。幫我如何綁定腳本中的值並將其輸出到Html

這裏的jQuery

$(function(){ 
    $.getJSON("http://query.yahooapis.com/v1/public/yql", { 
     q: "select * from json where url=\"http://api.wunderground.com/api/91bbc8aab3ab1f34/geolookup/conditions/q/IN/Chennai.json\"", 
     format: "json" 
}, function(data) { 
    var $content = $("#content") 
    if (data.query.results) { 
    $content.text(JSON.stringify(data.query.results)); 
    } else { 
     $content.text('no such code: ' + code); 
    } 

}); 
});

代碼HTML中的樣品

<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

內容股利和圖標是一個圖像標記

<div id="content"> 
<img id="weather_icon" />

當我運行應用程序只需要數據。我需要來自api的天氣圖像和數據。請幫忙

來源

2012-12-12 user1896860

'console.log（data.query.results）'看看你在結果中得到什麼... – bipen

在哪裏取代碼 – user1896860

嗨bipen我沒有得到結果。 ..請幫助我。我是'var $ content = $（「＃content」）'add'console.log（data）''之後的json和jquery – user1896860

試試這個，是能夠顯示天氣圖標..我修改了jQuery顯示圖像通過設置url到圖像標籤。只需挖掘想要在內容div中顯示的數據即可。

 $(function(){ 
     $.getJSON("http://query.yahooapis.com/v1/public/yql", { 
      q: "select * from json where url=\"http://api.wunderground.com/api/91bbc8aab3ab1f34/geolookup/conditions/q/IN/Chennai.json\"", 
      format: "json" 
      }, 
      function(data) { 
       // Dig for the data from the JSON object. 
       // The image URL can be found at: query > results > json > current_location > icon_url 
       $('#weather_icon').attr('src', data.query.results.json.current_observation.icon_url); 
       // Do the same for any data you want displayed for the content to be displayed.. 
      }); 
    });

來源

2012-12-12 08:33:42

關於jQuery，重要的行有： $（'＃weather_icon'）。attr（'src'，data.query.results.json。 current_observation.icon_url）; 此行將img標記的src屬性設置爲來自json對象的數據。我自己是jQuery的初學者，只是谷歌如何將東西放在div標籤。希望我幫助：D –

好的感謝天氣圖標dispalys和谷歌搜索.. – user1896860

根據ü提供的小提琴..

我用充滿<p id="temp"></p>顯示城市名稱。

$('#temp').html(data.query.results.json.current_observation.display_location.full);

這裏是小提琴

http://jsfiddle.net/SH7Ku/1/

更新

這裏更新小提琴....隨溫度

http://jsfiddle.net/SH7Ku/2/

同樣你可以做的休息...

來源

2012-12-12 12:13:13 bipen

非常感謝你bipen兄弟 – user1896860

開始使用螢火蟲控制檯...這將幫助你檢查json數據返回，並將使您的工作輕鬆... :)無論如何歡呼...並開始接受答案..所以其他用戶將開始幫助你:) :) – bipen

如何綁定腳本中的值並將其輸出到Html

回答

相關問題