「顯示更多」按鈕，使用Ajax

Question

我試圖做「顯示更多」按鈕，使用Ajax，以顯示新的結果每點擊

<input type="hidden" id="direction" value="{$page+1}" /> 
<script type="text/javascript"> 
$(document).ready(function(){ 

$('#show_more').click(function(){ 
    $('#results_ajax').fadeIn("slow").delay(1000); 
    var ajax_url = "../profile/results_ajax/"; 
    var direction = parseInt($('#direction').val()); 
     $.ajax({ 
     url: ajax_url + direction, 
     type : "POST", 
     dataType :"html", 
     success : function(msg){ 
      $('#direction').val(direction + 1); 
      $('#results_ajax').append(msg) 

     }   
     }); 
    }); 
    }); 
</script> 

<div style="float: right;width:72%;margin-right:20px;"> 
<table width="100%" style="border-bottom:0px;"> 
<tr class="tbl"> 
<td colspan="4">{$ci->lang->line('results_archive')}</td> 
</tr><tr> 
<td class="tbl1" style="width: 50%;">{$ci->lang->line('exam_title')}</td> 
<td class="tbl2" style="width: 15%;">{$ci->lang->line('score')}</td> 
<td class="tbl1" style="width: 15%;">{$ci->lang->line('percentage')}</td> 
<td class="tbl2" style="width: 20%;">{$ci->lang->line('date')}</td> 
{foreach $results as $result} 
<tr> 
<td class="tbl1" style="width: 50%;">{$result.id}.{$result.exam_title}</td> 
<td class="tbl2" style="width: 15%;">{$result.score}/{$result.full_mark}</td> 
<td class="tbl1" style="width: 15%;">{$result.percentage}%</td> 
<td class="tbl2" style="width: 20%;">{date('d-m-Y',{$result.date})}</td> 
</tr> 
{/foreach} 
</table> 
<div id="results_ajax" style="display:none;"></div> 
<button id="show_more">Show More</button> 
</div> 

所以這是我的代碼，但我小問題，我想要每次點擊都會產生一些加載效果，但是（fadeIn）效果僅在第一次出現，之後新的結果顯示沒有任何效果，表格顯示爲直接！

Answer 1

您的「顯示更多」按鈕類型看起來像提交表單的類型（表單提交後會加載新頁面）。我建議將其更改爲常規按鈕或取消默認操作，以免提交表單。

如果仍然沒有顯示您的問題，那麼將一個錯誤處理程序添加到ajax調用，並確定它是否返回錯誤，如果是，那麼錯誤是什麼。

---

而且，這裏的.delay(1000)沒有做任何事情：

$('#results_ajax').fadeIn("slow").delay(1000); 

如果你想真正延緩Ajax調用了一秒鐘，你將需要使用一個setTimeout()。

---

結合所有這些建議爲你的代碼：

HTML：

<button id="show_more">Show More</button> 

代碼：

$('#show_more').click(function(e){ 
     e.preventDefault(); 
     $('#results_ajax').fadeIn("slow"); 
     setTimeout(function() { 
      $.ajax({ 
      url: "../results_ajax/2", 
      type: "POST", 
      dataType:"html", 
      success: function(msg){ 
       $('#results_ajax').html(msg) 
      }, 
      error: function(xhr, status, error) { 
       console.log(status); 
       console.log(error); 
      } 
      }); 
     }, 1000); 
    }); 
}); 

Answer 2

首先，更改提交按鈕將按鈕，它不是提交任何你無法控制的東西。其次，除非你知道有結果要顯示（例如Ajax成功），否則你不應該顯示結果div，所以把你的fadeIn放入成功函數中，並且你可以延遲。這隻會在AJAX成功時觸發。

即使您只是將結果記錄到控制檯供您參考（或測試時），我也會建議添加錯誤處理程序。沒準在這種情況下，您的AJAX請求失敗和你沒有處理的錯誤，所以你不知道這是怎麼回事：

<button type="button" id="show_more">Show More</button> 

$('#show_more').click(function(e){ 
    e.preventdefault(); 
    $.ajax({ 
     url: "../results_ajax/2", 
     type : "POST", 
     dataType :"html", 
     success : function(msg){ 
      $('#results_ajax').html(msg).fadeIn("slow"); 
     }, 
     error: function(msg){ console.log(msg); } 
    }); 
}); 

更新

你遇到麻煩你的AJAX網址，我建議你只在隱藏的輸入中存儲頁碼，而不是整個URL。然後，您可以用您的成功增加的功能是：

<input type="text" id="direction" value="{$page}"> 

你的AJAX調用需要的direction（頁碼），它串接到URL，然後遞增一個成功的字段值。

var ajax_url = "../profile/results_ajax/"; 
var direction = parseInt($('#direction').val()); 
$.ajax({ 
    url: ajax_url + direction, 
    ... 
    success: function(msg) { 
     $('#direction').val(direction + 1); 
     ...