基础写法

        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. 【XSY2332】Randomized Binary Search Tree 概率DP FFT

    题目描述 \(\forall 0\leq i<n\),求有多少棵\(n\)个点,权值和优先级完全随机的treap的树高为\(i\). \(n\leq 30000\) 题解 设\(f_{i,j}\ ...

  2. bzoj 1103 : [POI2007]大都市meg (树链剖分+线段树）

    Description 在经济全球化浪潮的影响下,习惯于漫步在清晨的乡间小路的邮递员Blue Mary也开始骑着摩托车传递邮件了.不过,她经常回忆起以前在乡间漫步的情景.昔日,乡下有依次编号为1..n ...

  3. VIM 光标移动常用命令

        h或^h 向左移一个字符  k或^p 向上移一行 j或^j或^n 向下移一行 l或空格 向右移一个字符 G 移到文件的最后一行 nG 移到文件的第n行 w 移到下一个字的开头 W 移到下一个字 ...

  4. LOJ #2234. 「JLOI2014」聪明的燕姿（搜索 + 数论）

    题意 给出一个数 \(S\) ,输出所有约数和等于 \(S\) 的数. \(S \le 2 \times 10^9\) ,数据组数 \(\le 100\) . 题解 首先用约数和定理: \[ \beg ...

  5. Star sky CodeForces - 835C

    用一个三维数组cnt[x][y][k]表示从(1, 1)到(x, y)亮度为k的个数,然后查询的时候就是对于每一个亮度,计算出这个亮度t秒后的亮度和当前这个亮度的个数,答案就是他们的乘积, 然后遍历每 ...

  6. Manacher (最长回文序列)

    https://www.cnblogs.com/grandyang/p/4475985.html 思路是学习的是上面博客的想法,思路很清晰 优化的方法和exkmp有异曲同工的地方 博客里的内容我在这里 ...

  7. hdu 1686 Oulipo (kmp)

    Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...

  8. 在MacOS上使用gdb(cgdb)调试Golang程序

    如果你在MacOS上使用GDB工具载入Golang程序时无法载入,这篇文章可以解决.本文不具体介绍调试的方法,网上的文章太多了就不赘述了. cgdb使用的是gdb的内核,方法和原理试用本文. 问题分析 ...

  9. django 通过邮箱和用户名都能登录

    一. 在settings.py 文件中的#Application definition 下增加代码: AUTHENTICATION_BACKENDS=( 'users.views.CustomBack ...

  10. [LNOI2014]LCA（树链剖分+线段树）

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=3626 题解:看到LCA,我们可以直接想到这题的正解不是LCA!(LCA只能得20分,还要 ...