Jquery Ajax HTML -添加加载

Jquery Ajax HTML - Add Loading

本文关键字：添加 加载 HTML Ajax Jquery      更新时间：2023-09-26

我在本地尝试了这段代码，我似乎无法让它在我的country_slidediv中显示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;
    }
}

我通常使用。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;
    }
}

通过这种方式，微调器可以最初放置在父元素中，然后在从服务器

返回内容时被覆盖。

您可以使用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();
},
相关文章：