Javascript 显示来自另一个php页面的链接而不重新加载页面

基本上我在第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页的新内容在不重新加载的情况下显示，同时更改我的URL

这可能吗？

HTML：

---

禁用url修改而不重新加载

您将需要使用ajax调用，并修改当前url@EoiFirst你能给我举个例子吗？如果不重新加载，你就不能更改URL。你能澄清一下你想把EWHTML放在哪里吗。另外，我有大约10个这样的div，这意味着我将有10个ajax调用？我确实尝试过pushState，但它不符合我的目的。我编辑了我的答案。通过在标记上设置数据url，您可以通过使用此url进行ajax调用，并避免多同步代码。我错了-它不起作用，我想更改完整的html，而不仅仅是单个div。然后您只需修改标记。如果你想更改所有页面，也许可以考虑重新加载页面？

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

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