基础写法

        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. HBase电子书

    HBase 不睡觉书  https://pan.baidu.com/s/1d4u7pPAu_B3sW5w9x1ARdA HBase2018年年度总结 https://pan.baidu.com/s/1 ...

  2. 【BZOJ 1701】Cow School（斜率优化/动态凸包/分治优化）

    原题题解和数据下载 Usaco2007 Jan 题意 小牛参加了n个测试,第i个测试满分是\(p_i\),它的得分是\(t_i\).老师去掉\(t_i/p_i\)最小的d个测试,将剩下的总得分/总满分 ...

  3. BZOJ 5097: [Lydsy1711月赛]实时导航（最短路 + bitset）

    题意 \(n​\) 个点的有向图,边权 \(\in \{1, 2, 3, 4\}​\) ,\(m​\) 次修改边权/加边/删边,\(q​\) 次询问:以 \(s_i​\) 为起点,输出它到其他点的最短 ...

  4. [CF438D]The Child and Sequence【线段树】

    题目大意 区间取模,区间求和,单点修改. 分析 其实算是一道蛮简单的水题. 首先线段树非常好解决后两个操作,重点在于如何解决区间取模的操作. 一开始想到的是暴力单点修改,但是复杂度就飙到了\(mnlo ...

  5. bootstrap boosting bagging辨析

    http://blog.csdn.net/jlei_apple/article/details/8168856

  6. CANOE入门（三）

    最好的学习方式是什么?模仿.有人会问,那不是山寨么?但是我认为,那是模仿的初级阶段,当把别人最好的设计已经融化到自己的血液里,变成自己的东西,而灵活运用的时候,才是真正高级阶段.正所谓画虎画皮难画骨. ...

  7. centos7搭建ELK Cluster集群日志分析平台（四）：Fliebeat-简单测试

    续之前安装好的ELK集群 各主机:es-1 ~ es-3 :192.168.1.21/22/23 logstash: 192.168.1.24 kibana: 192.168.1.25 测试机:cli ...

  8. C语言学习记录之一

    1. while语句 2. 循环嵌套 3. 数组 4. 排序 1. while 由于上节课时间有限,介绍完for循环后没有来得及讲while语句.简单来讲,while也是一种循环结构,先看一个例子: ...

  9. javascript柯里化及组合函数~

    大家是不是看我上篇博文有点蒙.用的的curry和compose是什么鬼,怎么那么神奇.上篇博文也是主要用到了这两个函数.那今天我们来聊一下curry和compose,这两个东西是函数式编程很重要的东西 ...

  10. JQuery选择器，事件，DOM操作,动画

    JQuery是一个JavaScript代码库,或者是JavaScript框架: 1.选择器:(和CSS选择器一致) 基本选择器:ID选择器$('#div1');Class选择器('.div1');标签 ...