使用Ajax调用同一页面使body内容显示两次



我正在从页面上的链接中对同一PHP页面进行AJAX调用。对于最终代码,我将传递一些参数,但是为了使其简单,我在下面的代码中没有这样做。我使用Ajax的原因是要输入"请等待"消息,因为它似乎是最有效的方法(通常您可以从一个页面到另一页来打电话,这可以很好地工作(。

单击链接后,我确实会相应地看到"请等待"消息,但它可以将<BODY>部分的内容保留在Ajax调用显示的新内容下方。因此,在下面的示例中,我基本上获得了2个链接,上面写着"单击此处"。如何使其仅加载新内容(在这种情况下是相同的(?

这一定很简单,但我不确定这里缺少什么。

pwait.php

    <body>
    <?php sleep(3); //To allow for the message to show as I have nothing processing here ?>  
    <a href="#" onclick="loadingAjax('myDiv')">Click here</a>
    <script>
    function loadingAjax(div_id)
    {
     $("#"+div_id).html('<center><img src="http://img/ajax-loader.gif"><b>Please Wait ...
    </b></font></center>');
        $.ajax({
            type: "POST",
            url: "pwait.php",
            success: function(msg){
            $("#"+div_id).html(msg);
        }
    });
}
</script>
<div id="myDiv"></div>
</body>

在讨论之后,我们发现您的代码正常工作。它正是您要求它做的事情。

  1. 从服务器加载页面
  2. 单击按钮
  3. 通过Ajax加载同一页面
  4. 将页面内容复制到页面上的DIV
  5. 显示重复内容

这就是您问的,这就是您收到的。

最新更新