jQuery的load方法设计动态加载及解决被加载页面js

布满荆棘的人生 2022-06-02 22:53 392阅读 0赞

###  ###

> 上面提了下jQuery的load方法，感觉这需要记录下： jQuery load()方式是一个简单强大的ajax方法。  
> load()从服务器获取数据，并把返回的数据放入被选元素中。 语法  
> $(selected).load(URL,data,callback);
> 
> 其中：  
> URL是必须有的，剩下连个是可选的，callback参数是load()方法执行完后要他去执行的函数。  
> 比如：  
> //这个就是将txt文件中的test文本读取的内容加载到id为div1的DIV中  
> $(“\#div1”).load(“txt/test.txt”)；  
> 带回调函数的：

$("#btn").click(function(){ 
        $("#div1").load("txt/text.txt",function(responseTxt,statusTxt,xhr){ 
            if(statusTxt=="success"){
                alert("加载成功");
                alert(responseTxt);
            }
            if(statusTxt=="error"){
                alert("error:"+xhr.status+":"+xhr.statusTxt);
            }
        });

\});  
上面代码中：  
1. responseTxt:包含调用成功时的结果内容  
2. statusTxt:包含调用状态  
3. xhr:包含XMLHttpRequest对象。

实际应用中  
：![这里写图片描述][SouthEast]

sy.showUrlTab=function(id,title,url,pid){
        /** * 1:左侧菜单点击跳转功能 */
        url = "/projectName-html"+url;
        $("#mainContent").load(url,function(result){
            /** * 动态 加载 js 文件 * 解决 load 方式 js 不能debug * 注意 命名规则 html 与 js 文件名同名 */
            var script = document.createElement("script");
              script.type = "text/javascript";
              if(typeof(callback) != "undefined"){
                if (script.readyState) {
                  script.onreadystatechange = function () {
                    if (script.readyState == "loaded" || script.readyState == "complete") {
                      script.onreadystatechange = null;
                      callback();
                    }
                  };
                } else {
                  script.onload = function () {
                    callback();
                  };
                }
              }
              script.src = url.replace('.html','.js')+"?version="+sy.version;
              document.body.appendChild(script);
        });
    // $.getScript("admin/qrcode/qrcodeList.js?version=20171213");
        /*document.write('<script src="admin/operators/operatorsInfo.js?version=20171213"></script>');*/
        ps： url: mainContext页面的url 全路径
            id: mainContext的id
            pid:mainContext上级menu的id

[SouthEast]: /images/20220603/e18fca2f81724d0a9bea42eaaceba314.png