Ajax在每个调用中复制结果

Question

我在ajax中有一个简单的分页：

more.js：

$(function() {
    $(".showmf").click(function(){  
        var info = $(this);
        $.ajax({
            type: "POST",
            url: "/more.php",
            dataType: 'html',
            data: info,
            success: function(data){
                $(".showmf").remove();
                $('.appdataf').append(data);
            }
        });
    });
});

more.php

<script type="text/javascript" src="/more.js"></script>
<?php
echo"<div class='appdataf'>";   
for($i=0;$i<5;$i++){
   echo"$i";
}
echo"<span class='showmf'>MORE</span>"; 
echo"</div>";
?>

第一次单击跨度就可以了：1 2 3 4 5

2次返回2个请求：1 2 3 4 5更多1 2 3 4 5

3次返回3个请求：1 2 3 4 5更多1 2 3 4 5更多1 2 3 4 5

等等...

什么是错了Ajax重复PHP for多少次？

Answer 1

jQuery将内容添加到选择器内容的末尾。

您必须像这样清空内容：

$('.appdataf').empty().append(data);

或像这样将数据设置为html：

$('.appdataf').html(data);

Answer 2

这是因为，当您加载甚至由Ajax加载more.php文件时，它也会同时加载more.js文件（您可以在fire bug中对其进行检查）。

因为您在more.php写了<script type="text/javascript" src="/more.js"></script> 。

然后将单击事件重新绑定到$(".showmf") （每次您调用Ajax时）

解

从more.php删除此代码<script type="text/javascript" src="/more.js"></script> ，并将其放在在Ajax中调用时不会加载的位置

Answer 3

 $('.appdataf').append(data);

每次都附加结果。 您需要先清除它，然后再进行更新。

$('.appdataf').html("");
 $('.appdataf').append(data);

或者您可以直接执行$('.appdataf').html(data);