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 请问如何查看手机root记录?
  • ¥15 商城小程序订单号重复
  • ¥15 学校优化算法sbo和蚁群算法怎么结合
  • ¥21 matlab怎么求时域信号的二阶导数
  • ¥15 判断两个表是否完全相同
  • ¥15 java map类型数据格式,如何快速通过前缀匹配元素
  • ¥15 stc12c5a60s2、QMC5883L、LCD1602组合测量磁场所需程序
  • ¥20 Win11测试yolov4,“找不到nvcuda.dll”怎么办?
  • ¥15 simulink绘制bode图
  • ¥15 php_network_getaddresses: getaddrinfo failed: Name or service not known