Question

我有一些jquery，它设计用于在div打开时发出ajax请求。我关心的是在ajax调用中可能会加载相当多的html，如果用户使用切换按钮打开并关闭div，那么ajax请求仍然会继续用户关闭了div。

我的问题是;当div关闭时，我是否需要担心停止ajax请求？如果是这样，我如何将它绑定到被关闭的div上？

这是我的代码：http://jsfiddle.net/spadez/mz8Sm/1/

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
    });

    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
            },
        });
    });
});

看起来这就是我所追求的，但我似乎无法将它正确地绑定到切换上，只有当它被关闭时。

http://api.jquery.com/ajaxStop/

感谢您提供任何帮助。

Answer 1

尝试

$(function () {
    $('#close').click(function (e) {
        e.preventDefault();
        $('#country_slide').slideToggle();
        if(loadxhr){
            loadxhr.abort();
        }
    });

    var loadxhr;
    $('#country_link').on('click', function (e) {
        e.preventDefault();
        var $link = $(this);
        // Exit if the data is loaded already
        if ($link.data('loaded') === true) {
            console.log('Not using Ajax.');
            $("#country_slide").slideToggle();
            return false;
        }

        loadxhr = $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/echo/html/',
            timeout: 5000,
            beforeSend: function () {
                $("#country_slide .content").html('<p>Loading</p>')
            },
            success: function (data, textStatus) {
                console.log('Fecthed with Ajax.');
                $("#country_slide .content").html(data);
                $("#country_slide").slideToggle();
                // If successful, bind 'loaded' in the data
                $link.data('loaded', true)
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            },
            complete: function () {
                loadxhr = null;
            },
        });
    });
});

在关闭DIV时取消Ajax请求

1 个答案: