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();
},