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

May Louis Ogharandukun-brow

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

布朗·路易斯

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

$(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);
       
    });
    

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

调用函数后,使用Jquery和php重新加载当前页面

来自分类Dev

使用 Jquery 的订单列表和当前页面

来自分类Dev

使用Crossrider从扩展中获取当前页面的url

来自分类Dev

使用Ajax发送html数据和表单并停留在当前页面上

来自分类Dev

提交使用jQuery和AJAX动态插入页面的表单?

来自分类Dev

使用Javascript / jQuery基于当前页面和列表的动态面包屑()

来自分类Dev

使用服务器端的URL哈希获取当前页面的完整URL

来自分类Dev

如何使用JavaScript在Android WebView中获取当前页面的URL?

来自分类Dev

使用量角器和TypeScript,如何从URL作为字符串返回当前页面名称?

来自分类Dev

JQuery 数据表分页:显示当前页面的 2 个上一个和下一个数字

来自分类Dev

使用jQuery和AJAX加载零件页面

来自分类Dev

如何使用AJAX和JQuery在div中加载HTML页面

来自分类Dev

如何使用AJAX和JQuery在div中加载html页面

来自分类Dev

jquery 和 css:页面内容加载动画

来自分类Dev

jQuery:刷新当前页面时加载新页面

来自分类Dev

使用Javascript / jQuery基于当前页面的动态面包屑

来自分类Dev

使用Javascript / jQuery基于当前页面的动态面包屑

来自分类Dev

在RAILS中使用AJAX销毁微信时,如何重新加载当前页面

来自分类Dev

使用load ajax在当前页面中加载新的google map

来自分类Dev

如何使用WooCommerce获取当前页面的标题

来自分类Dev

单击更改jQuery和AJAX的页面内容

来自分类Dev

使用gwtwiki加载Wiki页面和内容

来自分类Dev

我想使用hashbang URL(blah.com/#!/thingtoload)动态加载页面内容(以DIV格式),我有jQuery和Bootstrap

来自分类Dev

如何使用 Facebook、LinkedIn 和 Twitter 共享按钮共享当前页面?

来自分类Dev

每x分钟使用Ajax加载和显示外部页面内容

来自分类Dev

使用jquery .on()和$ .ajax

来自分类Dev

如何使用Jquery Datatable仅对当前页面进行排序

来自分类Dev

使用javascript / jquery刷新iframe中的当前页面

来自分类Dev

如何在不重新加载页面的情况下使用laravel ajax发布和获取评论?

Related 相关文章

  1. 1

    调用函数后,使用Jquery和php重新加载当前页面

  2. 2

    使用 Jquery 的订单列表和当前页面

  3. 3

    使用Crossrider从扩展中获取当前页面的url

  4. 4

    使用Ajax发送html数据和表单并停留在当前页面上

  5. 5

    提交使用jQuery和AJAX动态插入页面的表单?

  6. 6

    使用Javascript / jQuery基于当前页面和列表的动态面包屑()

  7. 7

    使用服务器端的URL哈希获取当前页面的完整URL

  8. 8

    如何使用JavaScript在Android WebView中获取当前页面的URL?

  9. 9

    使用量角器和TypeScript,如何从URL作为字符串返回当前页面名称?

  10. 10

    JQuery 数据表分页:显示当前页面的 2 个上一个和下一个数字

  11. 11

    使用jQuery和AJAX加载零件页面

  12. 12

    如何使用AJAX和JQuery在div中加载HTML页面

  13. 13

    如何使用AJAX和JQuery在div中加载html页面

  14. 14

    jquery 和 css:页面内容加载动画

  15. 15

    jQuery:刷新当前页面时加载新页面

  16. 16

    使用Javascript / jQuery基于当前页面的动态面包屑

  17. 17

    使用Javascript / jQuery基于当前页面的动态面包屑

  18. 18

    在RAILS中使用AJAX销毁微信时,如何重新加载当前页面

  19. 19

    使用load ajax在当前页面中加载新的google map

  20. 20

    如何使用WooCommerce获取当前页面的标题

  21. 21

    单击更改jQuery和AJAX的页面内容

  22. 22

    使用gwtwiki加载Wiki页面和内容

  23. 23

    我想使用hashbang URL(blah.com/#!/thingtoload)动态加载页面内容(以DIV格式),我有jQuery和Bootstrap

  24. 24

    如何使用 Facebook、LinkedIn 和 Twitter 共享按钮共享当前页面?

  25. 25

    每x分钟使用Ajax加载和显示外部页面内容

  26. 26

    使用jquery .on()和$ .ajax

  27. 27

    如何使用Jquery Datatable仅对当前页面进行排序

  28. 28

    使用javascript / jquery刷新iframe中的当前页面

  29. 29

    如何在不重新加载页面的情况下使用laravel ajax发布和获取评论?

热门标签

归档