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文件（你可以在火灾中检查它）。

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

这就是将click事件重新绑定到$(".showmf")（每次调用Ajax时）

<强>解决方案

删除此代码<script type="text/javascript" src="/more.js"></script> 来自more.php并将其置于Ajax

中调用它时无法加载的位置

Answer 3

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

每次都会附加结果。在更新之前，您需要先清除它。

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

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

每次调用都会产生Ajax重复结果

3 个答案: