局部刷新

最新推荐文章于 2021-09-16 16:08:40 发布

潇凝子潇

最新推荐文章于 2021-09-16 16:08:40 发布

阅读量326

点赞数

分类专栏： html 前端

本文链接：https://blog.csdn.net/xu990128638/article/details/83414700

版权

html 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

参考:
https://mp.weixin.qq.com/s?__biz=MzUxMzk2NjEzNA==&mid=2247483689&idx=1&sn=5552bde1cf4cc88406c4ebe2e04f70c1&chksm=f94c6870ce3be166b024e0c9198f9ed1efb1b7a6668f56b6371656de388e7346749994d79c63&mpshare=1&scene=1&srcid=1026fOqecBgWIv5iEPR3GiZa&pass_ticket=EngqZ9zm0%2BWQk%2FufKW1%2BzoQQm4icQhdKxK9LD86AK3SljsUMGwRn%2FbjTQq8YqpGo#rd

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div data-ajaxportal data-url="你需要加载的HTML片段的具体action地址" id="myAjaxPortal"></div>
<script type="text/javascript">
/**
 * 使用ajax加载Html片段Append到指定的DIv区域，完成局部刷新效果
 */
 (function($){
       $.extend($.fn,{
           ajaxPortal:function (replaceBody,url) {
               return this.each(function () {
                   var portal =$(this);
                   var l_url=""
                   if (url) {
                       l_url = url;
                   }else{
                       l_url=portal.data("url");
                   }
                   if(l_url.indexOf("?") != -1){
                       l_url = l_url +"&t="+new Date().getTime();
                   }else{
                       l_url = l_url+"?t"+new  Date().getTime();
                   }
                   var autoload = portal.data("autoload");
                   if (autoload==undefined) {
                       autoload = true;
                   }
                   if ((replaceBody== undefined && autoload)||(replaceBody != undefined)){
                       $.get(l_url,function (html) {
                           if (replaceBody){
                               portal.empty().html(html);
                           } else {
                               portal.append(html);
                           }
                       });
                   }
               });
           }
       });
 })(jQuery);
 $("#myAjaxPortal").ajaxPortal();

</script>
</body>
</html>