javascript - jQuery read XML URL - Stack Overflow

admin管理员组

文章数量:1279148

My below code working well but i need to import XML data from xml URL not from HTML file like this if i need to retrieve image from XML how i can do that.

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

$(document).ready(function(){
    //$('#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);
    });
    //alert($('#show_table').html());
}) 

all what i need is change this var xml = "9/8 ... " to let the JQuery code read from the ONLINE URL

My below code working well but i need to import XML data from xml URL not from HTML file like this if i need to retrieve image from XML how i can do that.

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

$(document).ready(function(){
    //$('#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);
    });
    //alert($('#show_table').html());
}) 

all what i need is change this var xml = "9/8 ... " to let the JQuery code read from the ONLINE URL

• javascript
• jquery
• html
• xml

Share Improve this question Follow edited Feb 2, 2014 at 8:41 user3237099 asked Feb 2, 2014 at 7:59 user3237099user3237099 4911 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

If you need to load XML data from the URL, you need to execute AJAX request, it may be something like this:

$(function() {
    $.ajax({
        type: "get",
        url: "http://yoursite./yourfile.xml",
        dataType: "xml",
        success: function(data) {
            /* handle data here */
            $("#show_table").html(data);
        },
        error: function(xhr, status) {
            /* handle error here */
            $("#show_table").html(status);
        }
    });
});

Keep in mind, if you use AJAX you can place .xml file on the same domain name. In other case you need to set up cross-origin resource sharing (CORS).

EDITED:

I modified your code, now it appends td element to your table. But xml is still inside html.

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

$(function() {
    $(xml).find('show').each(function() {
        console.log(this);
        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));
    });
});

But you need to modify your html file, check my solution here: http://jsfiddle/a4m73/

EDITED: full solution with loading xml from URL

I bined two parts described above, check here: http://jsfiddle/a4m73/1/

Use jquery-xpath, then you can easily do what you want like:

$(xml).xpath("//shows/show");

if you want know more about xpath just take a look on XML Path Language (XPath) document.

var xml = "<shows><show><date>9/8</date><place>Toads Place</place><location>New Haven, CT</location><time>9PM</time></show></shows>";

$(document).ready(function () {
    //$('#table').append('<h2>SHOWS</h2>'); 
    $('#table').append('<table id="show_table">');
    $(xml).xpath("//shows/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);
    });
})

本文标签： javascriptjQuery read XML URLStack Overflow