基础写法

        function load(targetId,templateName) {

            $("#"+targetId).load(contextPath+templateName);

        }
　　　　　

陷阱1: 异步加载问题

由于load是异步触发的,以下方法中的2行代码都是同时并发执行的,由于网络延迟等问题,哪句先执行并不确定.

而id为templateId的<div id="templateId">init</div>元素又是通过load加载进来的.

如果是后面第3行的$("#templateId").html("hellow");先执行,那么由于$("#templateId")找不到(此时尚未加载完div),其实并不会执行html("hellow")操作.

         function load(targetId,templateName) {

             $("#"+targetId).load(contextPath+templateName);

             $("#templateId").html("hello");

         }

陷阱2: 缓存问题

由于很多浏览器为了降低请求服务器的负荷,做了同样的请求地址,从本地缓存取历史数据的优化.所以我们需要在地址后面添加一些动态后缀.

        function load(targetId,templateName) {

            var nowDate = new Date();

            var randomId = nowDate.getTime();//防缓存

            $("#"+targetId).load(contextPath+templateName+"?"+randomId);

        }

陷阱3: 结构破坏问题

在陷阱1(缓存问题)的基础上,可能还会遇到更深层次的问题,那就是当我们load加载得到的数据如果不符合<html>规范,那么就会破坏原有的dom结构,导致后续取dom和其它节点异常.

比如原有

<html lang="cn">

 <head>

  <title>test</title>

 </head>

 <body>

    <textarea id="mytext"></textarea>

 </body>

</html>

如果load得到的数据为 <textarea>< 

那么最终生成了为不规则的html闭包.下次再取dom时可能取不到了,因为破坏了原有的结构

<html lang="cn">

 <head>

  <title>test</title>

 </head>

 <body>

    <textarea id="mytext"><textarea><</textarea>

 </body>

</html>

此时我们可以改成

        function load(targetId,templateName) {

            var nowDate = new Date();

            var randomId = nowDate.getTime();//防缓存

            $("#"+targetId).load(contextPath+templateName+"?"+randomId,{},function (responseTxt){

                $("#"+targetId).val(responseTxt);

            });

        }

此时生成的html元素不会作为dom节点,而是作为文本域的原始文本插入,也就没有破坏原始dom.所以下次取值还是正常的

<!doctype html>

<html lang="cn">

 <head>

  <title>test</title>

 </head>

 <body>

    <textarea id="mytext">"\<textarea\>\<"</textarea>

 </body>

</html>

总结

其实

$("#"+targetId).load(contextPath+templateName+"?"+randomId)

就是调用了html(xxx)

        function load(targetId,templateName) {

            var nowDate = new Date();

            var randomId = nowDate.getTime();//防缓存

            $("#"+targetId).load(contextPath+templateName+"?"+randomId,{},function (responseTxt){

                $("#"+targetId).html(responseTxt);

            });

        }

jquery load 陷阱【原】的更多相关文章

  1. jQuery load()方法用法集锦！

    调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...

  2. 在 ASP.NET 中使用 jQuery.load() 方法

    今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据. 使用 jQuery 的朋友应该知道可以使用 jQuery.load( ...

  3. 关于IE8中使用Jquery load方法无法正常加载页面

    最近发现,在IE8中使用Jquery load方法时无法正常加载页面,页面显示空白,没有加载.调试发现,页面多了一个</div>标签,但在FF和CH下表现正常.希望能给遇到同样问题的码农有 ...

  4. 使用Jquery.load()方法,出现-此页的状态信息无效，可能已损坏。[转]

    今天遇到此页的状态信息无效,可能已损坏,在以下页面找到解决办法,特记录下来: 转自:http://www.cnblogs.com/liuwenlong/archive/2011/05/09/20410 ...

  5. jquery.load问题

    简单Jquery--Ajax应用 作为一个新手,最近自己写了一个人主页,虽然性能不怎么样,但就出现的各种大的小的问题拿出来与大家分享分享. ----DanlV 描述 错误描述 自己不知道什么原因,直接 ...

  6. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  7. jquery load()函数和window.onload事件

    我想用jquery load()一个饼状图页面, 但是load不出来 代码如下: 后来百度了一下,解决办法如下: window.onload事件只有在文档载入的时候才会执行的,你载入子页面不会触发这个 ...

  8. IE8中jQuery.load()加载页面不显示的原因

    一.jQuery.load() jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中. url :请求服务器的地址 dat ...

  9. jQuery .load() 里面的代码不能执行

    今天在写代码的时候发现.on('load')绑定的事件没用.代码如下: debugger断点没进来,说明函数压根没进来. 后面在stackoverflow上找到了解决方法,方法如下图: 这样写,如果提 ...

随机推荐

  1. 配置Robot Framework 环境时如何查看wxPython是否成功安装

    配置Robot Framework,win10系统,安装版本分别如下:

  2. Android 简单调用摄像头

    IDE: android studio3.1.2 界面: activity_main2.xml

  3. LA3490 Generator(KMP + 高斯消元)

    题意 一开始给你一个长为 \(S\) 的字符串. 从空串开始,不断在后面添加一个 \([A, A + n]\) 的一个字符. 第一次包含 \(S\) 的时候会停止添加.问期望的添加次数. 有 \(T\ ...

  4. redis主从复制和sentinel配置高可用

    一:redis主从配置1.环境准备 master : 192.168.50.10 6179 slave1: 192.168.50.10 6279 slave2: 192.168.50.10 63792 ...

  5. luogu5019 [NOIp2018]铺设道路 (贪心)

    和NOIp2013 积木大赛一模一样 我在堆一格的时候,我把它尽量地往右去延伸 于是如果对于一个i,a[i-1]<a[i],那i在之前一定只堆过a[i-1]那么多,所以要再堆a[i]-a[i-1 ...

  6. VSCode创建自定义代码段

    上一篇:PyCharm创建自定义代码段(JetBrains系列通用) 设置方法 很简单,快速过一下,F1,然后输入snippets 然后选择对应语言 Python案例 内容和使用: { // pref ...

  7. NoSQL还是SQL？这一篇讲清楚

    https://mp.weixin.qq.com/s?__biz=MzAwMDU1MTE1OQ==&mid=2653550127&idx=1&sn=93f79e007d757a ...

  8. 斯坦福大学公开课机器学习： machine learning system design | error analysis（误差分析：检验算法是否有高偏差和高方差）

    误差分析可以更系统地做出决定.如果你准备研究机器学习的东西或者构造机器学习应用程序,最好的实践方法不是建立一个非常复杂的系统.拥有多么复杂的变量,而是构建一个简单的算法.这样你可以很快地实现它.研究机 ...

  9. 向redis中添加删除list列表

    转: 向redis中添加删除list列表 2018年04月18日 15:44:54 luo_yu_1106 阅读数:4082   一.添加 向redis中添加队列有两种方式 1.lpush l是lef ...

  10. echarts图Y周坐标轴文字过长的解决方案

    解决方案  只贴出关键代码 在翻看echarts文档的过程中我看到了坐标轴文字可以自行定义模板,于是想到了我给一个固定12的字数限制,超出部分以省略号代替,这样就不会造成图形范围忽大忽小了. axis ...