如何绑定脚本中的值并将其输出到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

回答

相关问题