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);