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

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

---

这个

在

dataservice.getPage（）函数中不是您想要的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);
      });
  })

问题是在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请求）
首先，从加载返回的表单没有像初始加载时那样的样式
display:none
。@DataHerder表单是用.hide（）隐藏的方法。在通过ajax加载数据后，它肯定不会被调用。是的，因为我必须委托或绑定它。因此，我切换到只将其显示为无，并使用jquery更改显示。这解决了问题，但我在解析html时遇到了问题。这样的东西很容易在浏览器开发工具网络中检查，在那里你可以深入挖掘每个请求。如果答案有帮助，请随意接受
    // 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();
})();