使用Jquery获取XML并放入html表

时间:2011-10-02 08:12:29

标签: xml jquery

我知道之前已经问过这个问题,但我无法弄清楚是什么问题,我正在尝试使用jQuery加载一个包含节目列表的XML文件,以便可以在一个文件中更新节目,并且上传到多个页面。对我来说,似乎我做的一切都是正确的,但我的知识jquery充其量是脆弱的。其中大多数只是从其他问题的答案拼凑而成。

我的HTML

<aside id="shows"class="aside shadow">
<div class="text" id="table">
<div class="more low"> MORE SHOWS </div>
<div class="less"> LESS SHOWS </div>
</div>
</aside>

我的Jquery

function showData() {
$.ajax({
   type: "GET",
   url: "shows.xml",
   dataType: "xml",
   success: function getShows(a) {
    $('#table').append('<h2>SHOWS</h2>'); 
    $('#table').append('<table>'); 

    $(a).find('show').each(function(){
        var $show = $(this);
        var date = $show.find('date').text();
        var place = $show.find('place').text();
        var location = $show.find('location').text();
        var time = $show.find('time').text();

        var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr></table>';

        $('<table>').append(html);

    });
    }
 });
}

和XML

<shows>
<show>
    <date>9/8</date>
    <place>Toads Place</place>
    <location>New Haven, CT</location>
    <time>9PM</time>
</show>

</shows>

这没有任何意义 这对我来说完全正确,所以我非常困惑。知道我,我错过了半结肠。 &GT;&LT;

谢谢!

2 个答案:

答案 0 :(得分:0)

尝试输入确切的网址...

url: "shows.xml",

... 也许shows.xml与Jquery ajax函数不在同一个文件夹中

答案 1 :(得分:0)

您能否确认ajax调用正常并调用成功方法 您可以查看ajax调用和firebug上的响应 如果xml返回正常,你可能想在下面尝试,稍微修改成功方法,例如http://jsfiddle.net/Jayendra/2PFxr/

尝试 -

$.ajax({
    type: "GET",
    url: "shows.xml",
    dataType: "xml",
    success: function(xml){
        $('#table').append('<h2>SHOWS</h2>'); 
        $('#table').append('<table id="show_table">'); 
        $(xml).find('show').each(function(){
            var $show = $(this);
            var date = $show.find('date').text();
            var place = $show.find('place').text();
            var location = $show.find('location').text();
            var time = $show.find('time').text();
            var html = '<tr><td class="bold">' + date + '</td><td class="hide">' + place + '</td><td>' + location + '</td><td class="bold">' + time + '</td></tr>';
            $('#show_table').append(html);
        });
    }
});