Question

我有一个通过AJAX填充列表框的功能。

function listCourses() {    
var s= document.getElementById( 'courses' );

return $.ajax({
    type: "GET",
    url: "http://localhost:80/RickVideos/courseLib.xml",
    dataType: "xml",

    success: function( xml ){

        // load array with course codes
        var arr = [];
        $(xml).find( 'courseCode' ).each(function() {
                s.options[ s.options.length ] = new Option( $( this ).text());
        });

     },

    error: function() {
        alert("An error occurred while processing XML file." );
    }

});

当调用该函数时，我想在AJAX处理过程中显示一个模态对话框，然后用显示填充列表框的另一个模态对话框替换模态对话框。

 $(  "#ajaxLoading #listOfCurrentProjects" ).overlay({
    left: "center",
    top: "center", 
   closeOnClick: false, 
    load: false
}); 
$( "#newCourse" ).click( function() { 
   $("#ajaxLoading").overlay().load();

    listCourses().done(function() {
        $("#ajaxLoading").overlay().close();
        $("#listOfCurrentProjects").overlay().load();   
});;

单击newCourse按钮时，将显示ajaxLoading对话框，然后关闭。 listOfCurrentProjects对话框不显示。第二次单击newCourse按钮时，ajaxLoading对话框显示，然后关闭，被listOfCurrentProjects对话框替换。这是期望的行为。为什么在初始按钮点击时不会发生？

Answer 1

使用jQuery 1.5及更早版本中实现的promises，例如.done()。您可以决定不使用success或error回调。

var listCourses = function() { 
    return $.ajax({
        type: "GET",
        url: "http://localhost:80/RickVideos/courseLib.xml",
        dataType: "xml"
    });
});

您可以使用listCourses()随时调用您的AJAX。您甚至可以将它绑定到处理程序，几乎就像您所做的那样：

$('#newCourse').click(function() { 
    $('#ajaxLoading').overlay().load();

    listCourses().done(function(xml) {
        var s = document.getElementById('courses');
        $(xml).find( 'courseCode' ).each(function() {
            s.options[s.options.length] = new Option($( this ).text());
        });

        $("#ajaxLoading").overlay().close();
        $("#listOfCurrentProjects").overlay().load();
    }).error(function() {
        alert("An error occurred while processing XML file." );
    });
});

通过变量进行AJAX调用，可以使它更加冗长：

var listCourses = $.ajax({
    type: "GET",
    url: "http://localhost:80/RickVideos/courseLib.xml",
    dataType: "xml"
});

然后在收听listCourses上的点击操作时，只需引用变量listCourse(s)，而不是函数#newCourse：

$('#newCourse').click(function() { 
    $('#ajaxLoading').overlay().load();

    listCourses.done(function(xml) {
        var s = document.getElementById('courses');
        $(xml).find( 'courseCode' ).each(function() {
            s.options[s.options.length] = new Option($( this ).text());
        });

        $("#ajaxLoading").overlay().close();
        $("#listOfCurrentProjects").overlay().load();
    }).error(function() {
        alert("An error occurred while processing XML file." );
    });
});

如何正确配置jquery .done方法

1 个答案: