用jQuery问题加载AJAX

Question

I have this ajax call for loading a selection of data in xml.

I am not getting any JS errors, it does the before, the complete is not working, I guess I am not calling the data correctly.

Any thoughts on what I am doing wrong in the complete function loop?

 $.ajax({
  type: "GET",
  url: "xml/classes.xml",
  dataType: "XML",
  beforeSend: function(){
    $('#classContainer').append("<p>Loading</p>");},
  complete: function() {
    $(this).find('monday').each(function(){

            var $classdate = $(this); 
            var title = $classdate.find("class").attr('title');

            var level = $classdate.find("class").attr('classLevel');
            var time = $classdate.find("time").text();
            var duration = $classdate.find("time").attr("duration");
            var hourofday = $classdate.find("time").attr("hourofday");
            var location = $classdate.find("location").text();



            var Monhtml = '<div class="classBlock">';

            Monhtml += '<p class="title">' + title + '<span class="loadingPic" alt="Loading" /> ' + ' </p>';
            Monhtml += '<p class="infoBar"> <strong>Time:</strong>' + time + '<span class="hour">'+ hourofday +'</span><br>'+'<strong>Duration:</strong>' + duration +'&nbsp;Minutes <br>' + '<strong>Location:</strong>' + location + '<br><strong>Instructor:</strong> </p>';
            Monhtml += '<p class="description">  <span class="level">' +  level  + '</span></p>' ;

            Monhtml += '</div>';


            $('#classContainer').append($(Monhtml));
        });
        }
    }); 
}); 

Changed Complete to:

 success: function(xml) {
    $(xml)

And it loads, whats the difference?

Answer 1

Your're not making the response available within the complete function. Try this:

 $.ajax({
  type: "GET",
  url: "xml/classes.xml",
  dataType: "XML",
  beforeSend: function(){
    $('#classContainer').append("<p>Loading</p>");},
  complete: function(resp) {
    $(resp).find('monday').each(function(){

            var $classdate = $(this); 
            var title = $classdate.find("class").attr('title');

            var level = $classdate.find("class").attr('classLevel');
                var time = $classdate.find("time").text();
                var duration = $classdate.find("time").attr("duration");
                var hourofday = $classdate.find("time").attr("hourofday");
                var location = $classdate.find("location").text();



            var Monhtml = '<div class="classBlock">';

            Monhtml += '<p class="title">' + title + '<span class="loadingPic" alt="Loading" /> ' + ' </p>';
                Monhtml += '<p class="infoBar"> <strong>Time:</strong>' + time + '<span class="hour">'+ hourofday +'</span><br>'+'<strong>Duration:</strong>' + duration +' Minutes <br>' + '<strong>Location:</strong>' + location + '<br><strong>Instructor:</strong> </p>';
                Monhtml += '<p class="description">  <span class="level">' +  level  + '</span></p>' ;

            Monhtml += '</div>';


            $('#classContainer').append($(Monhtml));
        });
        }
    }); 
});