Question

我是jquery和编码的新手。这就是我想要做的事情：

点击链接后，展开#country_slide div
显示“加载”文字
如果ajax成功，请将html文件的内容放入div
否则提示错误并关闭div

这是我现在的代码：

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

您的主播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的onclick函数替换了click事件订阅。如果您使用的是jQuery，最好充分利用它。

Answer 2

因为没有ID country_link

的元素如果找不到元素，

document.getElementById()将返回null

document.getElementById('country').onclick = ...; //should work

在JavaScript中，null是一个特殊的原语，您无法向基本类型添加属性。

Answer 3

你有小提琴

<a href="#" id="country">

它应该在哪里：

<a href="#" id="country_link">

或将JS更改为

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

Answer 4

<强> Working jsFiddle Demo

您的网页中没有任何country_link元素。
您可以使用DOM就绪，而不是使用window.onload。
使用.on()方法通过jQuery附加点击处理程序。
.val()方法适用于<input />。对于其他元素，请改用.html()。

// DOM ready instead of window.onload
$(function () {
    // attach click handler by jQuery instead of onclick
    $('#country').on('click', function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            beforeSend : function() {
                $("#country_slide").show();
                // val() method is for <input />
                // use html() instead
                $("#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;
    });
});

参考文献：

.html() - jQuery API文档
.on() - jQuery API文档
.val() - jQuery API文档
jQuery( callback ) - jQuery API文档

Answer 5

如果你已经拥有jQuery，那么不要使用普通的JS（对你来说会更容易）：

;$(document).ready(function(){
    $(country_link).click(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;
    });
  });

Answer 6

你必须添加一个id = country_link的元素，这个代码将按照NOX的说法运行。我在jsfiddle尝试过。尝试使用

$("#country").click(function(){
// your code goes here

})

这将有效。

Answer 7

document.getElementById("country_link");将被document.getElementById("country");取代，因为"country_link"不是标记中任何id标记的<a>。
如果您使用的是jQuery库，则可以处理类似
的事件
```
$(document).on("click","a",function(){
    //ajax stuff
});
```

Answer 8

更新了您的jsfiddle代码。检查一下。它失败的方法。在您的工作区中，您应该让test.html返回实际数据。感谢。

Jquery Ajax - 不加载文本

8 个答案: