基础写法

        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. 醉汉随机行走/随机漫步问题（Random Walk Randomized Algorithm Python）

    世界上有些问题看似是随机的(stochastic),没有规律可循,但很可能是人类还未发现和掌握这类事件的规律,所以说它们是随机发生的. 随机漫步(Random  Walk)是一种解决随机问题的方法,它 ...

  2. Qt Creator 编译测试 MQTT-C

    @2018-12-21 [小记] 创建工程步骤: a. File ---> New File or Project ---> Non-Qt Project ---> Plain C ...

  3. 中断 LET′S TRY“嵌入式编程”: 5 of 6

    中断 LET′S TRY“嵌入式编程”: 5 of 6 本连载讲解作为嵌入式系统开发技术人员所必需具备的单片机的基础知识.本期为最后一期,将为大家介绍在单片机控制系统中不可缺少的 处理方式--“中断” ...

  4. 基于配置文件的redis的主从复制

    redis中主从复制有很多种配置方法: 1. 使用配置文件即为redis.conf来配置 在随从redis中配置 # slaveof {masterHost} {MastePort} slaveof ...

  5. 【POJ2230】Watchcow

    题目大意:给定一个 N 个点,M 条边的无向图,要求不重复地经过每条边两次,并且从 1 号节点出发最后回到 1 号节点,求一条路径. 题解:不重复地经过两次这个操作很容易地通过无向图的建边方式来实现, ...

  6. vcftools报错：Writing PLINK PED and MAP files ... Error: Could not open temporary file.解决方案

    一般来说有两种解决方案. 第一种:添加“--plink-tped”参数: 用vcftools的“--plink”参数生成plink格式文件时,小样本量测试可以正常生成plink格式,用大样本量时产生W ...

  7. error2019-01-17 宏STDOUT_FILENO

    STDOUT_FILENO定义在<unistd.h> EXIT_SUCCESS <stdlib.h> 1.fatal error: sys/capability.h: No s ...

  8. redis设置密码以及jedisPool设置密码

    转: redis设置密码以及jedisPool设置密码 2019年01月02日 20:24:43 宇文荒雪 阅读数:1118   版权声明:本文为博主原创文章,未经博主允许不得转载. https:// ...

  9. 第二十七节，IOU和非极大值抑制

    你如何判断对象检测算法运作良好呢?在这一节中,你将了解到并交比函数,可以用来评价对象检测算法. 一 并交比(Intersection over union ) 在对象检测任务中,你希望能够同时定位对象 ...

  10. Day6--Python--小数据池和再谈编码

    一.小数据池 参考 目的:缓存我们字符串,整数,布尔值.在使用的时候不需要创建过多的对象 缓存: int, str, bool int: 缓存范围 -5~256 str: 1. 长度小于等于1,直接缓 ...