0

当我请求一个页面并且它返回 404 时，以下代码给了我这样的错误。相反，它应该显示一个警报。奇怪的是，它只在 ajaxed 的链接上执行此操作，在不更新/更改的链接上它工作正常。

('.page-wrap').append('<img src="img/graphics/ajax-loader.gif" class="ajax-loader" />');

    var target = $('section.content'),
        siteURL = 'http://' + top.location.host.toString(),
        internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']"),
        links = $('a'),
        URL,
        el,
        mainContent,
        headContent,
        headClasses,
        pageName,
        ajaxSpinner = $('.ajax-loader');
    internalLinks.click(function(e) {

        el = $(this);

        URL = el.attr('href');

        $('.current_page_item').removeClass('current_page_item');
        el.addClass("current_link").parent().addClass("current_page_item");

        ajaxLoader(URL, false);

        e.preventDefault();

    });

    function ajaxLoader(location, isHistory) {
            $("html, body").animate({ scrollTop: "0px" });
            ajaxSpinner.show();
            $('.page-wrap').css('opacity', '0.5}');


            // Load New Page
            $.get(location, function(data) {
                mainContent = $('section.content', data).html();
                headContent = $('.feature-content', data).html();
                pageName = $('.page-name', data).html();
                headClasses = $('header', data).attr('class');
                $('section.content').html(mainContent);
                $('.page-name').html(pageName);
                $('.feature-content').html(headContent);
                if (headClasses) {
                    $('header').attr('class', headClasses);
                } else {
                    $('header').removeClass();
                }
                if (!isHistory) {
                    history.pushState(location, '', location);
                }

                $(resizeHeader);

                ajaxSpinner.fadeOut();
            }).error(function() {
                alert('woops'); // or whatever
            });
    }
    w.bind('popstate', function(event) {
        if (event.originalEvent.state !== null ) {
            ajaxLoader(event.originalEvent.state, true);
        }
    });
4

1 回答 1

1

最初的想法

  • 是否可能是您的成功处理程序代码中的某些内容导致某种错误？就像注入第一次成功返回的任何 html 可能会导致脚本第二次失败？

  • 您在您选择的 Fiddler/Firebug/F12 开发人员工具中看到了什么——您正在使用其中之一，对吗？:) 留意任何控制台错误...

第二个想法

你使用的是什么 jQuery 版本？

我已经用 jq 1.8.2 对此进行了测试，错误处理程序对我来说工作得很好，但如果这是一个 JSONP 请求，它不会触发 error() 函数。我把你的代码的要点：

$.get(
               "404MeBaby.html", function (data) {
                   $(".result").html(data);
                   console.log(data);
               }
            ).error(
            function (x) {
                console.log("well that didn't go so well...");
            });

从API：

从 jQuery 1.5 开始，成功回调函数也传递了一个“jqXHR”对象（在 jQuery 1.4 中，它传递了 XMLHttpRequest 对象）。但是，由于 JSONP 和跨域 GET 请求不使用 XHR，在这些情况下，传递给成功回调的 jqXHR 和 textStatus 参数是未定义的。

您可以尝试使用$.ajax它，因为它提供了更多控制。或者，您可以设置 jQuery 全局 ajax 选项，如此处所示，这将影响所有 $.get 调用，但如果相关，请记住 JSONP 的诅咒！

于 2013-09-22T23:02:12.773 回答