使用ajax承諾將內容異步加載到頁面中

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,
    })
}

然后在偶數處理程序中傳入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);
      });
  })

Answer 2

問題是您在 getPage 方法中有對 $(this) 的引用。 $(this) 在此上下文中不存在，您必須通過所有方法傳遞它。

    // 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($(this))
            .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 ($this) {
        var url = $this.attr('href'); // this returns undefined
        return $.ajax({
            type: 'GET',
            url: url,
        })
    }

    return {
        getPage: function($this) {
            getPage($this);
        }
    }
})();


// 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();
})();

這是小提琴（檢查您的 javascript 控制台以查看 ajax 請求）