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

首先，将提交按钮更改为按钮，它不会提交任何您无法控制的内容。其次，你不应该显示结果div，除非你知道有结果显示（例如Ajax成功），所以把你的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网址出现问题，我建议您只将页码存储在隐藏的输入中，而不是整个网址。然后，您可以使用成功函数递增它：

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

您的AJAX调用采用direction（页码），将其连接到URL，然后在成功时将字段值增加1。

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

＆＃34;显示更多＆＃34;用Ajax按钮

2 个答案: