javascript - Jquery Ajax HTML - 添加加载

Question

我已经在本地尝试过这段代码，但我似乎无法让它在我的 country_slide div 中显示 html 文件的内容。我试过玩它一点都无济于事。我似乎看不到任何代码来实际告诉 ajax 将内容放在哪里。

http://jsfiddle.net/spadez/uhEgG/23/

window.onload = function () {
    var a = document.getElementById("country_link");
    a.onclick = function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            success: function (data, textStatus) {
                $("#country_slide").show();
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            }
        });
        return false;
    }
}

Answer 1

我通常使用 .html 函数将内容插入到父元素中

window.onload = function () {
    var a = document.getElementById("country_link");
    a.onclick = function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            }
        });
        return false;
    }
}

这样，微调器最初可以放置在父级内部，然后在从服务器返回内容时被覆盖

Answer 2

您可以使用beforeSend和complete方法来显示或隐藏加载符号

beforeSend : function() {
   $('.loader').show();
}, 
success: function (data, textStatus) {
    $("#country_slide").show();
    alert('request successful');
},
error: function (xhr, textStatus, errorThrown) {
    alert('request failed');
},
complete : function() {
   $('.loader').hide();
},