jquery load 函数和缓存设置

来源：互联网发布：剑网三怎么在淘宝代练编辑：程序博客网时间：2024/04/26 05:21

1.jquery load函数

格式：$("#id").load(url,[data],[callbak] );

说明：1.url 是一个url地址

2.data 是可选的，这个一般是传递参数使用的，多数时候是post参数。比如｛name:'test',address:'sz',sex:'男'｝这里向后台的url 地址传递三个参数，相当于get请求的参数是：url?name=test&address=sz&sex=男

3.callbak 是可选的。是调用ajax load之后的一个回调函数，加载完成之后要做一些事情可以用这个回调来处理。比如：加载完成需要弹窗一下。这样就可以了：$("#id").load(url,{name:'test'},function(){alert('succ');} );

2.使用例子

2.1 加载一个静态页面

$("#id").load('http://myurl.com/test.html');

2.2 加载一个动态页面，不需要参数

$("#id").load('http://myurl.com/test.php');

2.3 加载一个动态页面，需要参数

$("#id").load('http://myurl.com/test.php',{name:'test'}); 相当于get请求http://myurl.com/test.php?name=test

2.4 加载一个动态页面，需要参数，需要回调函数

$("#id").load('http://myurl.com/test.php',{name:'test'},function(){ alert('succ');});相当于get请求http://myurl.com/test.php?name=test 之后的一个ajax callbak ，成功的话，会弹出 alert

3.使用load 单独加载div的内容

比如我们想动态的更改一个页面的上的某个div 里面的内容，实现五刷新的页面

定义A 页面 a.html

<html>

<head>

</head>

<body>

</body>

function test()

{

var url = "http://myurl.com/test.php";

$("id").load(url);

}

</script>

</html>

php 代码 test.php

<?php

echo "<span>div 动态内容加载</span>";

上面的这个例子实现了 jquery的 load方法使用，当点击了 button之后，div的内容动态改变了。前提是上面需要引入jquery

4.使用load 单独加载div的内容的问题

今天我们在使用jquery的时候发现了一个问题，就是a.html 里面加载了 jquery.js,然后我们在 test.php 里面也放了同样路径的 jquery.js。当执行load 函数，我们抓包后发现 test.php 里面的 jquery.js 被加上了随机数重新加载了，按照道理，test.php只会去加载本地js的，不会重复加载对应的jquery.js 。那这是为什么呢？

研究发现 jquery 会在使用ajax load 拉取数据的时候，默认会动态的在 ajax的目的js上打上随机数标签，重新拉取里面的js，以确保test.php的js是最新的，并且能单独使用的。但是就我们的项目而言，这个是不需要的，不需要重新加载的。

如何解决呢？

1. 最快的方案是，不要去研究为什么会出现这样的问题，直接将 test.php 和 a.html里面相同的js 去掉，不再引用。

2. 找到最根本的原因。然后再通过jquery本身来解决他。最终我们发现，jqury在使用ajax的时候，有一个参数是可以设置的，那就是ajax的ajaxSetup 来设置是否ajax 拉取数据的时候，是不是需要缓存。默认ajax是不需要缓的。默认不需要缓存的话，就导致了load 后的那些数据，直接加上了随机数，去拉取了最新的数据了。设置ajax 的ajaxSetup 来控制缓存的问题。 $.ajaxSetup({cache:true});一个语句句就把问题解决了。

3.说明下：设置了 cache 为true的时候，ajax某些情况拉取数据会有缓存的情况，所以避免这个问题的发生，需要在 ajax请求里面显示的加上随机数来解决。比如 $.ajax({type:'get',url:'http://myurl.com/test.php?r='+Math.random(),success:function(){alert('succ')}});

jquery load 函数和 缓存设置

jquery load 函数和缓存设置