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

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页的新内容无需重新加载即可显示，同时这会更改我的URL。

这可能吗？

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") ）。

请参阅在不重新加载页面的情况下修改URL，以在不重新加载URL的情况下进行修改