基础写法

        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. CH2401 送礼物(算竞进阶习题)

    双向dfs 数据不是很大,但是如果直接暴搜的话2^45肯定过不了的.. 所以想到乱搞!!要让程序跑的更快,肯定要减下搜索树的规模,再加上这道题双搜的暗示比较明显(逃),所以就来乱搞+双搜求解 所以先从 ...

  2. Codeforces Round #505 Div. 1 + Div. 2

    传送门:>Here< 从来没打过\(CF\)(由于太晚了)-- 不知道开学了以后有没有机会能够熬夜打几场,毕竟到现在为止都是\(unrated\)好尴尬啊~ 今天早上打了几题前几天的比赛题 ...

  3. JeeSite 部署到linux服务器

    1.打包 改数据库连接 打包war包https://www.cnblogs.com/wdw31210/p/9878422.html 2.上传到linux 服务器的tomcat/webapps/ 下 安 ...

  4. 【hihocoder 1424】 Asa's Chess Problem（有源汇上下界网络流）

    UVALive-7670 ICPC北京2016-C题 hihocoder 1424 题意 有个 \(N\times N\) 的棋盘,告诉你每个格子黑色(1)或白色(0),以及每对能相互交换的同行或同列 ...

  5. 自学Zabbix4.0之路

    自学Zabbix4.0之路 01 Centos7安装Zabbix4.0步骤 02 Centos7下Zabbix3.4至Zabbix4.0的升级步骤 03 Zabbix4.0添加cisco交换机基本监控 ...

  6. luogu5024 [NOIp2018]保卫王国 (动态dp)

    可以直接套动态dp,但因为它询问之间相互独立,所以可以直接倍增记x转移到fa[x]的矩阵 #include<bits/stdc++.h> #define CLR(a,x) memset(a ...

  7. String Reconstruction （并查集）

    并查集维护和我这个位置的字母连续的已经被填充的字母能到达的最右边的第一个还没有填充的位置,然后把这个位置填上应该填的东西,然后把这个位置和下一个位置连接起来,如果下一个位置还没有填,我就会把下一个位置 ...

  8. 在JSON中遇到的一些坑

    今天在进行压测的时候,由于需要使用到json进行传参,并且需要在JMeter中加入少量的JSON,由于JSON在java中呈现键值对的形式,并且需要使用到“”来修饰,导致只能使用\进行转义,在发送请求 ...

  9. 分页技术 -servlet

    一.思路: 定义四个分页变量. pagenow 表示第几页,该变量由用户决定的,是变化的. pageSize 每页显示几条记录,由程序定义,也可以由程序定制. pageCount 表示共有多少页,(该 ...

  10. 译：Spring Boot 自动伸缩

    原文链接:https://dzone.com/articles/spring-boot-autoscaler 作者:Piotr Mińkowski 译者:helloworldtang 自动伸缩是每个人 ...