javascript - 使用 ajax promise 将内容异步加载到页面中

Question

我想在单击导航栏上的链接时将内容异步加载到我的页面中。虽然，使用 .load() 方法有效，但我很难弄清楚如何使 promise 对象以相同的方式工作。我也很困惑为什么当我点击“主页”时我的表单是可见的，即使我将它设置为隐藏。

http://jsfiddle.net/Piq9117/Lzw514md/

    // Navigation
        var navigation = (function () {
            var $nav = $('#navigation a');
            var $page = $('#page');
            var $container = $('#container');

        $nav.on('click', function (e) {
            e.preventDefault();
            $page.remove();
            dataservice.getPage()
                .done(function (data) {
                $container.html($(data).find('#page'));
                })
                .fail(function (jqXHR, statusText, err) {
                alert(err);
                })
        })
        // the .load works fine..
        // $nav.on('click', function(e) {
        //  e.preventDefault();
        //  var url = $(this).attr('href');
        //  $page.remove();
        //  $container.load(url + ' #page');
        // })


    })();


    // Promise object, passed to navigation
    var dataservice = (function () {

        var getPage = function () {
            var url = $(this).attr('href'); // this returns undefined
            return $.ajax({
                type: 'GET',
                url: url,
            })
        }

        return {
            getPage: getPage
        }
    })();


    // chache/hide/show form
    (function () {
        var form = {
            init: function () {
                this.cacheDom();
                this.events();
            },
            cacheDom: function () {
                this.$container = $('.container');
                this.$page = this.$container.find('#page');
                this.$showbtn = this.$container.find('#showbtn');
                this.$form = this.$page.find('#form');
                this.$form.hide();
                this.$submitbtn = this.$page.find('#submitbtn');
            },
            events: function () {
                this.$showbtn.on('click', this.showForm.bind(this));
                this.$submitbtn.on('click', this.hideForm.bind(this));
            },
            showForm: function () {
                this.$form.fadeIn(300);
                this.$showbtn.hide(300);
            },
            hideForm: function (e) {
                e.preventDefault(300);
                this.$form.hide(300);
                this.$showbtn.show(300);
            }
        }

        form.init();
    })();

Answer 1

dataservice.getPage() 函数中的

this 不是您想要的 dom 元素。您需要将该元素作为参数传递进来，因为您真正需要的只是 href，也许传递 url 看起来会更好

var getPage = function (url) {        
    return $.ajax({
        type: 'GET',
        url: url,
    })
}

然后在 even handler 中传入 href:

  $nav.on('click', function (e) {
      e.preventDefault();
      $page.remove();
      dataservice.getPage(this.href) // pass in `href`
        .done(function (data) {
          $container.html($(data).find('#page'));
        }).fail(function (jqXHR, statusText, err) {
          alert(err);
      });
  })