2015-06-23 38 views
-2

我試圖動態創建一個手風琴,並通過AJAX動態填充每個選項卡的內容,我的主要HTML頁面有手風琴我可以有一個while循環在AJAX成功函數中迭代嗎?

<div id="accordion"></div> 

一個空div如果最終目標是讓格填入從服務器返回的數據,看起來像這樣:

<div id="accordion"> 
    <p> accordion tab title 1</p> 
    <div> 
     <ul> 
      <li>jon</li> 
      <li>jill</li> 
      <li>jacob</li> 
     </ul> 
    </div> 

    <p>accordion tab title 2</p> 
    <div> 
     <ul> 
      <li>ben</li> 
      <li>brittany</li> 
      <li>bob</li> 
     </ul> 
    </div> 

    <p>accordion tab title 3</p> 
    <div> 
     <ul> 
      <li>larry</li> 
      <li>laura</li> 
      <li>lilly</li> 
     </ul> 
    </div> 
</div> 

我將能夠使用一個while循環,我的AJAX成功函數內通過數據進行迭代並創建列表項?這裏是我迄今爲止功能:

$(function() { 
    var $accordion= $("#accordion"); 
    $.ajax({ 

     type:'GET', 
     url: "PDOconnect.php", 
     dataType: "json", 
     success: function(data){ 
     $.each(data, function(i,data){ 

      $accordion.append('<p>'+ data.title + '</p>'); 
      $accordion.append('<div><ul></ul></div>'); 
      ); 
     }) 
     }, 
     error: function(xhr, textStatus, errorThrown) { 
      alert("Request failed: " + textStatus); 
     } 
    });// end ajax 
    }); 
}); 
+0

你試過了嗎?它似乎會起作用。你有什麼錯誤嗎? –

+0

yes..why not ..雖然看起來多了'';''在'$ accordion.append('

    ');'line – vinayakj

    +1

    之後'成功函數就像任何其他函數一樣。 jQuery不關心你在函數內做什麼。 –

    回答

    0

    Ajax調用後$.ajax運行的成功回調已成功完成。這意味着您可以通過多種不同的方式操作數據,但您喜歡它。

    映射,過濾,簡化循環是前端工程師可能會從網頁上的服務器使用數據的一些常見方式。

    你可以把循環放在這裏就好了,實際上這就是大多數人將數據加載到列表中的方式。

    相關問題