使用 jQuery Ajax 加载和覆盖当前页面 url 和内容

Question

我的 index.php 上有一个产品列表，在单击产品名称时，我想通过加载 product_details.php 页面及其内容和 url 来覆盖 index.php 内容和 url，而无需重新加载页面。

我使用下面的代码覆盖了 url，但我不知道如何加载内容。

$(document).on("click", ".view", function(e) { 

  e.preventDefault();

  var url = $(this).attr(href);

  history.pushState('obj', 'Product Details', url); 


 }); 

这是我想要的一个例子

www.flutterwave.com/store/sativamerch

Answer 1

你可以做这样的事情......

$(document).on("click", ".view", function(e) {

       e.preventDefault();
    
       var url = $(this).attr("href");
  

    $('#loader').css("display","inline-block"); // display's a loader while loading 
    
        
     setTimeout(function() {  
    
            $("#products").load(url + " #details", function() {
    
       history.replaceState('obj', 'Product_Details', url);  });
          
        }, 2000);
       
    });