如何使用ajax追加外部內容？

請看看如何使用ajax追加外部內容？

<div class="item"> 
    <div class="section"> 
     <a href="/test.php?id=1" class="clickme">Click Item 1 </a> 
    </div> 
</div> 
<div class="item"> 
    <div class="section"> 
     <a href="/test.php?id=2" class="clickme">Click Item 2 </a> 
    </div> 
</div> 
<div class="item"> 
    <div class="section"> 
     <a href="/test.php?id=3" class="clickme">Click Item 3 </a> 
    </div> 
</div> 


$('.clickme).click(function(event) { 
    event.preventDefault(); 
    var stringURL = $(this).attr("href"); 
    $.ajax({ 
     type: "get" 
     , url: stringURL 
     , data: "ajax=1" 
     , success: function(html){ //so, if data is retrieved 
      //append 
     } 
    });  
}); //close click(

如果它是一個單一的部分區域，我可以使用它的id和追加的內容定位它。但是，如何知道根據點擊情況以及是否已經存在外部內容（即已創建的調用），只要更新該部分，我怎麼知道哪個部分用最新內容填充。這將是很好，如果你幫助如何顯示/隱藏加載圖像只有該部分。

謝謝

來源

2010-07-12 user187580

以及你錯過了$（'。clickme）中的結尾報價 – 2010-07-12 15:19:37

你將不得不讓javascript函數知道哪一節更新。而不是使用一個類各段，分配onclick每<a>這給功能段的部分號碼：

<a href="/test.php?id=2" onclick="javascript: updateContent(2);">Click Item 2 </a>

此外，給部分唯一的ID（例如）：

<div class="section" id="section2">

然後你的JavaScript會看起來像這樣;

updateContent(id) { 
    event.preventDefault(); 
    var stringURL = "index.php?id=" + id; 
    $.ajax({ 
     type: "get", 
     url: stringURL, 
     data: "ajax=1", 
     success: function(html, id){ 
      //use javascript to update the correct section 
     } 
    });  
}

請注意，我不知道，如果中籤部分的function(html, id){}將工作，也許你會需要創建一個單獨的功能。

來源

2010-07-12 14:06:51

不，函數（html，id）不起作用，但它也不是必需的，因爲變量例如id被定義在功能在內部功能中保持定義。這就是所謂的*封閉*。 – 2010-07-12 14:08:42

很好，好吧。非常有用..出於某種原因，我總是遠離jQuery，只使用非常基本的JS，所以這就是爲什麼我不知道。你可以通過我的回答告訴我，相比於其他更優雅的答案.... – 2010-07-12 14:13:35

只要知道要填充哪個內容區域，就可以知道使用$(this)單擊了哪個內容區域，並且可以參考$(this).parent()的部分，前提是您要的元素是.section元素。

$('.clickme').click(function(event) { 
    event.preventDefault(); 
    var stringURL = $(this).attr("href"); 
     // store the parent of the element clicked 
    var $section = $(this).parent(); 
    $.ajax({ 
     type: "get" 
     , url: stringURL 
     , data: "ajax=1" 
     , success: function(html){ 
       // Append html to the section 
      $section.append(html); 
     } 
    });  
});

如果該<a>正在做的是AJAX調用的唯一的事情，再一個辦法是取消綁定在success回調的事件。

var $th = $(this);

然後在AJAX的成功：

$th.unbind('click');

如果這不是一個選項，然後就知道它是否已經被填充，你可以爲前收到的一些內容做了查找你.append()（或者如果內容已知，甚至在你提出請求之前）。

另一種選擇是將某些類型的標記，就像一個班，.section元素，如：

$section.addClass('populated');

......以表明它已被填充。然後檢查該類，並防止ajax存在。

根據實際情況，還有其他選項。

來源

2010-07-12 14:08:06 user113716

@patrick $ section和var section之間是否有區別？就是想？ Thx – user187580 2010-07-12 14:31:23

@user - 否。在變量名的開頭放置一個'$'，這只是jQuery開發人員用來表示該變量正在引用一個jQuery對象的約定。 – user113716 2010-07-12 14:33:13

@user - 那是你的意思嗎？清楚的是，AJAX中的$ section變量與AJAX之前創建的變量相同。 – user113716 2010-07-12 14:43:09

好吧，你可以在jQuery中，獲取點擊的$（href）對象的父級，然後根據該選擇填充'section'div。你會測試爲空和追加或覆蓋取決於該條件。

吉姆

來源

2010-07-12 14:08:06

$('.clickme).click(function(event) { 
    event.preventDefault(); 
    var stringURL = $(this).attr("href"); 
    var currentSection = $(this).parent().get(0); 
    $.ajax({ 
     type: "get" 
     , url: stringURL 
     , data: "ajax=1" 
     , success: function(html){ //so, if data is retrieved 
      //append 
      $(currentSection).append(html); 
     } 
    });  
});

順便說一句，如果您使用的是「阿賈克斯= 1」參數只是爲了確定是否請求是AJAX，你可以完全廢除它。 jQuery發送一個帶有ajax請求的「HTTP_X_REQUESTED_WITH」頭，你可以用它來檢測請求是否是ajax。 detecting ajax

來源

2010-07-12 14:19:28 vsr

如何使用ajax追加外部內容？

回答

相關問題