jquery load函数显示内容两次

Question

我的页面名称为load.php，内容为：

 <script>
        $(document).ready(function () {

            $("a").click(function () {          
                $("#mehdi").load(this.href, function(){
                 });
                return false;
            });
        });

    </script>

<a href="load.php?Name=mehdi"> click for load ajax</a>
<div id="mehdi">

<?php
    $db = new grid();
    $db->show();


    ?>

当我点击a tag页面发布到dbload.php时使用此内容：

class grid
{
    function show()
    {
        echo"<div id = 'show'>";
        if(isset( $_GET["Name"] ))
            echo "done";
        else
            echo "Not done";
            echo "</div>";
    }
}

当我看到带有浏览器的页面时，它就像这样：

当我点击a tag时，它是这样的：

我的问题是第二个链接会自动添加到页面。怎么了？

Answer 1

在<a href="load.php?Name=mehdi"> click for load ajax</a>内移动<div id="mehdi">。这样，当您拨打load

时，它就会被替换

<script>
    $(document).ready(function () {

        $("a").click(function () {          
            $("#mehdi").load(this.href, function(){
             });
            return false;
        });
    });

</script>

<div id="mehdi">
    <a href="load.php?Name=mehdi"> click for load ajax</a>

<?php
    $db = new grid();
    $db->show();
?>

这将解决您的问题，但您应该考虑通过ajax调用加载不同的页面。也许是ajax.php。这是因为load.php内的所有内容都在内部重新呈现。所以，在1 ajax之后调用它：

<div id="mehdi">
  <a href="load.php?Name=mehdi"> click for load ajax</a>
  not done
</div>

将嵌套于此：

<div id="mehdi">
  <div id="mehdi">
    <a href="load.php?Name=mehdi"> click for load ajax</a>
    not done
  </div>
</div>

Answer 2

使用此：

$("a").click(function () { 
e.preventDefault()
...