將jquery/ajax數據以HTML格式輸出到div

我已經從servlet中檢索了一些數據，現在想要輸出爲HTML格式，稱爲「showArticles」，並且每個值都具有相同的html塊。但是，它只輸出一個值。所以我有：將jquery/ajax數據以HTML格式輸出到div

|Article Title. | 
|Article content. |

我想有一些這樣的htmls。預先感謝您。

的AJAX：

$.ajax({ 
     url : "LoadArticlesByTag", 
     dataType : 'json', 
     type: 'GET', 
     data: { 
      b_sub_tag:option_value 
     }, 
     error : function(jqXHR, textStatus, errorThrown) { 
      alert(textStatus); 
     }, 
     success : function(data){ 
      var data1=data[0], data2=data[1]; 
      for(var i=0;i<data1.length;i++){ 
      outputToDiv(data1,i); 
      } 
     } 

    }); 


function outputToDiv(data1,i) {     
      $('#showArticles').html(    
      "<article class='one_quarter'>"+ 
       "<figure><img src='images/demo/32x32.gif' width='32' height='32' alt=''></figure>"+ 
       "<strong>"+data1[i]["name"]+"</strong>"+ 
       "<p>"+data1[i]["content"]+"</p>"+ 
       "<p class='more'><a href='#'>Read More &raquo;</a></p>" 

       ); 
     }

來源

2013-04-06 Sermilion

我建議你換'outputToDiv'取一個參數，並把它作爲' outputToDiv（DATA1 [I]）'。這樣你就不必一直重複數組索引。另外，使用'data.name'和'data.content'語法而不是數組式樣的語法;後者只能用於數值數組或屬性是動態的。 – Barmar 2013-04-06 10:28:31

非常感謝您的建議1 – Sermilion 2013-04-06 11:06:16

很簡單，.html()取代目標選擇的內容。嘗試使用.append()。

$('#showArticles').append(...)

永遠記得check the docs瞭解函數的工作時，他們像您期望的不做。

來源

2013-04-06 10:07:37

Hello Christian。非常感謝你。有效。我只是在昨天才開始使用jquery，所以沒有這麼多。我怎樣才能清除輸出的內容，以便只顯示新的選擇？我有一個選擇那裏。謝謝。 – Sermilion 2013-04-06 10:11:30

在你的ajax成功函數中，在'for'循環之前，清除它就像這樣：'$（'＃showArticles'）。html（''）;' – 2013-04-06 10:13:45

非常感謝你！你是這裏的奇蹟人!!!!! – Sermilion 2013-04-06 10:16:47

由於使用.html()，您每次撥打電話outputToDiv時都會覆蓋#showArticles上的內容。你需要要麼添加到使用.prepend()或使用.append()如果你想保留當前內容的末尾開始..

$('#showArticles').append(
    "<article class='one_quarter'>"+ 
    "<figure><img src='images/demo/32x32.gif' width='32' height='32' alt=''></figure>"+ 
    "<strong>"+data1[i]["name"]+"</strong>"+ 
    "<p>"+data1[i]["content"]+"</p>"+ 
    "<p class='more'><a href='#'>Read More &raquo;</a></p>");

來源

2013-04-06 10:09:13

將jquery/ajax數據以HTML格式輸出到div

回答

相關問題