2012-12-24 77 views
0

這裏是我通過ajax加載某個頁面的腳本。如何使用jQuery通過Ajax加載頁面片段

$(function(){ 

     // Keep a mapping of url-to-container for caching purposes. 
     var cache = { 
     // If url is '' (no fragment), display this div's content. 
     '': $('.bbq-default') 
     }; 

     // Bind an event to window.onhashchange that, when the history state changes, 
     // gets the url from the hash and displays either our cached content or fetches 
     // new content to be displayed. 
     $(window).bind('hashchange', function(e) { 

     // Get the hash (fragment) as a string, with any leading # removed. Note that 
     // in jQuery 1.4, you should use e.fragment instead of $.param.fragment(). 
     var url = $.param.fragment(); 

     // Remove .bbq-current class from any previously "current" link(s). 
     $('a.bbq-current').removeClass('bbq-current'); 

     // Hide any visible ajax content. 
     $('.bbq-content').children(':visible').hide(); 

     // Add .bbq-current class to "current" nav link(s), only if url isn't empty. 
     url && $('a[href="#' + url + '"]').addClass('bbq-current'); 

     if (cache[ url ]) { 
      // Since the element is already in the cache, it doesn't need to be 
      // created, so instead of creating it again, let's just show it! 
      cache[ url ].show(); 
     } else { 
      // Show "loading" content while AJAX content loads. 
      $('.bbq-loading').show(); 

      // Create container for this url's content and store a reference to it in 
      // the cache. 

      cache[ url ] = $('<div class="bbq-item"/>') 


      // Append the content container to the parent container. 
      .appendTo('.bbq-content') 


      // Load external content via AJAX. Note that in order to keep this 
      // example streamlined, only the content in .infobox is shown. You'll 
      // want to change this based on your needs. 
      .load(url, function(){ 
       // Content loaded, hide "loading" content. 
       $('.bbq-loading').hide(); 
      }); 
     } 
     }) 
     // Since the event is only triggered when the hash changes, we need to trigger 
     // the event now, to handle the hash the page may have loaded with. 
     $(window).trigger('hashchange'); 
    }); 

我是JQuery的燒烤插件,現在我的問題我怎麼才能得到我想要加載的頁面的唯一div?不是整個頁面本身,任何想法如何?

+0

您不能只加載一個div,但可以在返回的數據中「查找」它。 –

+0

@eicto實際上,你可以並且是「load」方法的一部分 – charlietfl

+0

@charlietfl它是在加載後通過頁面搜索.... –

回答

6

load()方法允許在實際文件url之後添加一個選擇器,以僅加載匹配選擇器的內容。

例如:

$('#someDiv').load('myFile.php #contentDiv');/* note space before selector*/ 

這將retrive的myFile.php全力輸出,但只從輸出插入contentDivsomediv

如果選擇是與多個項目的一類,將檢索所有這些

API參考號:http://api.jquery.com/load/

See sec標題爲Load Fragments

相關問題