Question

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

<?xml version="1.0" encoding="UTF-8"?>
<classpath>
    <classpathentry kind="src" path="src/main/java"/>
    <classpathentry kind="src" path="src/test/java"/>
    <classpathentry kind="src" path="src/main/resources"/>
    <classpathentry kind="src" path="src/test/resources"/>
    .
    .
    .
</classpath>

Answer 1

this函数中的

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

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

这里是fiddle（检查你的javascript控制台以查看ajax请求）

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

2 个答案: