Question

所以基本上我在第1页中有一个div的链接。

<a href="/computing/abc/page2.php" class="topic-list-item">

    <h3 class="topic-title">Internet Protocol Basics</h3>

    <div class="topic-description-text">
        Learn how Internet Protocol is used 
    </div>
</a>

当我点击div时，它会通过重新加载页面打开第2页。

我希望第2页的新内容在不重新加载的情况下显示，同时这会更改我的网址。

这可能吗？

Answer 1

HTML：

停用<a>代码，因为您将发送ajax请求而不是加载新页面

<a href="#" data-url="/computing/abc/page2.php" class="topic-list-item">

    <h3 class="topic-title">Internet Protocol Basics</h3>

    <div class="topic-description-text">
        Learn how Internet Protocol is used 
    </div>
</a>

JS（jQuery）：

绑定click事件以执行ajax调用，然后将服务器发回的HTML设置回原来的位置。

  $("a").click(function(){
    $.ajax({
      url: $(this).data("url"),
      method: 'get',
      success: function(data){
         $("#targetContainer").html(data);
      }
    })
  });

success函数的参数将是您的服务器发送回来的/computing/abc/page2.php页面。您可以将其设置在页面上的所需位置（此处位于$("#targetContainer")内）。

请参阅Modify the URL without reloading the page了解没有重新加载的网址修改

显示来自另一个php页面的链接，无需重新加载页面

1 个答案: