使用ajax异步加载内容到页面

Question

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

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

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请求）