drjtua5953 2014-04-30 13:22
浏览 41
已采纳

如何将XML标记的值获取到HTML页面中

I need to display the local weather in a PowerPoint slideshow (which updates itself regularely without human interaction). I have in mind to create a local html file that loads the data from the web and displays that in lateron in the ppt.

This is how the XML looks like (I load that from http://api.openweathermap.org/data/2.5/weather?q=Basel&mode=xml&units=metric)

<?xml version="1.0" encoding="UTF-8"?>
<current>
  <city id="2661604" name="Basel">
    <coord lon="7.57" lat="47.56"/>
    <country>CH</country>
    <sun rise="2014-04-30T04:13:21" set="2014-04-30T18:40:25"/>
  </city>
  <temperature value="12" min="12" max="12" unit="celsius"/>
  <humidity value="76" unit="%"/>
  <pressure value="1012" unit="hPa"/>
  <wind>
    <speed value="4.1" name="Gentle Breeze"/>
    <direction value="280" code="W" name="West"/>
  </wind>
  <clouds value="75" name="broken clouds"/>
  <precipitation value="1" mode="rain" unit="3h"/>
  <weather number="803" value="broken clouds" icon="04d"/>
  <lastupdate value="2014-04-30T11:00:00"/>
</current>

How do I now get the values from these tags into my html file?

I need it to be something like this:

  • Temperature: 12°C (I need the 12 from <temperature value="">
  • Weather icon from URL: http://openweathermap.org/img/w/04d.png (the url is static exept the 04d comes from the XML)
  • Sun rise: 6.13 am (<sun rise=""> +2 in summertime and +1 in wintertime)
  • Sun set: 8.40 pm (same as above)
  • last update: xxx

There is also a JSON version of the API (http://api.openweathermap.org/data/2.5/weather?q=Basel&mode=json&units=metric) and I would take whichever I get to work the fastest.

Also I would run it on our local windows XP machine (so no php available) but it it would only work with php I could get that to work easily.

Thanks for any help.

  • 写回答

1条回答 默认 最新

  • dpq755012465 2014-04-30 14:11
    关注

    You can use javascript/ jQuery. Add <div id="xml-data"></div> and code bellow on your html page. Hope I help.

    <script>
    jQuery(document).ready(function(){
        jQuery.ajax({
                type: "GET", 
                url: "http://api.openweathermap.org/data/2.5/weather?q=Basel&mode=xml&units=metric", 
                dataType: "xml", 
                success: function(xml) { 
    
                jQuery(xml).find('current').each(
                        function()
                        {
                          var city_name = jQuery(this).find('city').attr('name'),
                          country = jQuery(this).find('country').text(),
                          temperature = jQuery(this).find('temperature').attr('value');
    
                         jQuery('<div class="items"></div>').html('<h2>'
                          +city_name+'</h2><p>'
                          +country+'</p><p>'
                          +temperature+'</p>').appendTo('#xml-data');
    
                        });                 
                }
        });
    });
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题