关于 ajax 动态返回数据 css 以及 js 失效问题

Posted Greg

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于 ajax 动态返回数据 css 以及 js 失效问题相关的知识,希望对你有一定的参考价值。

ajax 毕竟是异步的 所以动态加载出来的数据 难免遇到 css 或者 js 失效的问题,所以要动态加载 css ji等文件了

 

1.公共方法 load 

  //动态加载 js /css 
        function loadjscssfile(filename, filetype) {
            if (filetype == "js") { //判定文件类型
                var fileref = document.createElement(\'script\')//创建标签
                fileref.setAttribute("type", "text/javascript")//定义属性type的值为text/javascript
                fileref.setAttribute("src", filename)//文件的地址
            }
            else if (filetype == "css") { //判定文件类型
                var fileref = document.createElement("link")
                fileref.setAttribute("rel", "stylesheet")
                fileref.setAttribute("type", "text/css")
                fileref.setAttribute("href", filename)
            }
            if (typeof fileref != "undefined")
                document.getElementsByTagName("head")[0].appendChild(fileref)
        }

 

 2.  示例代码

 //初始化左侧 管理菜单
        function InitLeftMenu() {

            var flag = false;    //标识,表示页面上数据还未处理完成

            $("#side-menu").empty();
            var menulist = \' <li class="nav-header"><div class="dropdown profile-element">\';
            menulist += \'<span><img alt="image" class="img-circle" src="/WebClient/static//BC.P.plus/img/profile_small.jpg" /></span>\';
            menulist += \'<a data-toggle="dropdown" class="dropdown-toggle" href="#">\';
            menulist += \'<span class="clear">\';
            menulist += \'<span class="block m-t-xs"><strong class="font-bold">OCP-admin</strong></span>\';
            menulist += \'<span class="text-muted text-xs block">管理员<b class="caret"></b></span>\';
            menulist += \'</span>\';
            menulist += \'</a>\';
            menulist += \'</div>\';
            menulist += \'<div class="logo-element">  QPTS  </div>\';
            menulist += \'</li>\';
            //同步获取
            $.ajax({
                type: \'GET\',
                url: \'/Handler/MenuPermissionsASHX.ashx?Func=GetEasyUIMenuList\',
                async: false,//同步
                dataType: \'json\',
                success: function (json) {
                    _menus = eval(\'(\' + json.data + \')\');

                    $.each(_menus.menus, function (i, n) {
                        menulist += "<li>";
                        menulist += \'<a href="#"> <i class="fa fa fa-bar-chart-o"></i><span class="nav-label">\' + n.menuname + \'</span><span class="fa arrow"></span></a> \';
                        menulist += \'<ul class="nav nav-second-level">\';
                        $.each(n.menus, function (j, o) {

                            menulist += \'<li><a class="J_menuItem"  href="\' + o.url + \'"  title="\' + o.menuname + \'">\' + o.menuname + \'</a></li> \';

                        })
                        menulist += \'</ul>\';
                        menulist += \'</li>\';
                    })

                    flag = true;                
                    $("#side-menu").html(menulist);

                },
                error: function (xhr, status, error) {
                    alert("操作失败"); //xhr.responseText
                }
            });    
         
            var loadFile;

           loadFile = setInterval(function() {//定时检测    
                if(flag) {//如果数据已经处理完毕
                    loadjscssfile(\'static/Bootstrap/css/bootstrap.min.css\', "css"); //加载你的css文件
                    loadjscssfile(\'static/jQuery/jquery-2.1.1.js\', "js"); //加载你的js文件
                    loadjscssfile(\'static/Bootstrap/js/bootstrap.min.js\', "js"); //加载你的js文件
                    clearTimeout(t);//取消定时检测节省开销
                }
            },50);

        }

 

 

相关链接:http://www.cnblogs.com/lkf18/archive/2012/05/24/2515935.html

 

以上是关于关于 ajax 动态返回数据 css 以及 js 失效问题的主要内容,如果未能解决你的问题,请参考以下文章

JS中将ajax请求返回json数据动态生成表格显示在div中

从后端获取到的数据直接返回div,里面的img怎么设置css样式

想问一下用html静态页+ajax访问动态页返回数据+js将数据添加到html页面这种方法的可行性

关于JSONP

动态获取本地json文件,渲染为表格-前端html+css+javascript,nth-child选择器,实时浏览插件,vscode,ajax

关于ajax伪实时动态下拉显示最新数据