javascript - Jquery Ajax - 不加载文本

Question

我对 jquery 和一般编码很陌生。这就是我正在尝试做的事情:

• 点击链接时，展开 #country_slide div
• 显示“正在加载”文本
• 如果ajax成功，将html文件的内容放入div中
• 否则发出错误警报并关闭 div

这是我现在拥有的代码:

http://jsfiddle.net/spadez/n9nVs/5/

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

单击链接后，我从未在框中看到加载文本。请有人告诉我我哪里出了问题？另外，如果有人可以对我的第一个 jquery 脚本提供任何建议，我将非常感激。

Answer 1

您的 anchor ID 是 country，而不是 country_link。所以:

var a = document.getElementById("country");

或者只使用 jQuery 的 id 选择器:

var a = $("#country");

或者更好的直接链接:

$(function() {
    $('#country').click(function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend : function() {
                $("#country_slide").show();
                $("#country_slide").html('<p>Loading</p>')
            }, 
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
                $("#country_slide").hide();
            },
            complete : function() {
               $('.loader').hide();
            }, 
        });
        return false;
    }
});

请注意，我使用了 $(document).ready 函数而不是 window.onload。此外，我还用 jQuery 的 click 函数替换了 onclick 事件订阅。如果您使用 jQuery，最好充分利用它。