0

我是 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 脚本提供任何建议，我将不胜感激。

4

8 回答 8

4

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

于 2013-06-06T08:19:47.150 回答
2

因为没有带有 ID 的元素country_link

document.getElementById()如果未找到元素，则返回 null

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

在 JavaScript 中，null是一种特殊的原语，您不能向原语类型添加属性。

于 2013-06-06T08:19:29.060 回答
2

工作 jsFiddle 演示

  • 您的页面中没有任何country_link元素。
  • window.onload您可以使用 DOM 准备好，而不是使用。
  • 通过 jQuery 使用.on()方法附加点击处理程序。
  • 该.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;
    });
});

参考：

于 2013-06-06T08:25:39.997 回答
2

在你的小提琴上

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

它应该在哪里：

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

或将 JS 更改为

var a = document.getElementById("country");
于 2013-06-06T08:20:30.777 回答
0

  1. document.getElementById("country_link");应替换为document.getElementById("country");as "country_link"is not the标记中id的任何标签。<a>

  2. 如果您使用的是jQuery库，则可以处理类似事件-

    $(document).on("click","a",function(){
    //ajax stuff
});
于 2013-06-06T08:29:37.727 回答
0

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

于 2013-06-06T08:30:10.693 回答
0

如果您已经拥有 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;
    });
  });
于 2013-06-06T08:21:46.350 回答
0

您必须添加一个 id=country_link 的元素，并且此代码将按照 NOX 所说的那样工作。我已经在 jsfiddle 中尝试过。尝试使用

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

})

这将有效。

于 2013-06-06T08:28:14.257 回答