网站首页 极客学院 视频课堂 极客论坛 下载专区 行业新闻 欢迎光临极客研究院,今天是2019-08-24 星期六
会员面板
帐号:
密码:
验证码:
极客学院
教程搜索
输入要搜索的内容:

下载专区
精品教程
   网站首页 > WEB开发 > Jquery/mobile教程 > Jquery Load GET详解

Jquery Load GET详解

我们知道Jquery要获取其它页面的内容可以用GET或LOAD,测试如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery测试</title>
<script src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function(e) {
        $("#btn").click(function(){
$("#d1").load("aa.php");
$("#d2").html("Done");
});
    });
</script>
 
 
</head>
 
<body>
<div id="d1"></div>
<div id="d2"></div>
<input type="button" id="btn" value="click" />
</body>
</html>

aa.php页面代码如下
<?
sleep(3);  //加了个延时
echo "I am a boy";
?>

实验结果可以看到,点击按钮后, d2先显示了done,d1等了几秒才显示I am a boy(从aa.php获取过来的),因此可以知道默认情况下,load 的执行是异步的

有时候,我们并不想它异步执行,因为我们可能需要获取返回的结果,判断结果再执行相应的操作,可以用以下的方法强制同步执行
<script language="javascript">
$.ajaxSetup ({ 
cache: false, //关闭AJAX相应的缓存
async : false  //关闭异步执行
});
$(document).ready(function(e) {
        $("#btn").click(function(){
$("#d1").load("aa.php");   //等待这句执行完成之后再执行后面的
$("#d2").html("Done");
});
    });
</script>
上面的方法是等于是设定了整个页面都关闭了异步,
还可以有另一种方法:
load可以有三个参数的 load(url,data,fun());  第三个参数是表示load完成之后执行的函数,所以可以把后续要执行的操作放在这个函数里面即可。(即是一个callback函数)
<script language="javascript">
 
$(document).ready(function(e) {
        $("#btn").click(function(){
   data={'aa':123};  //这是要传递给其它页面的数据
$("#d1").load("aa.php",data,function(){
$("#d2").html("done");
});
});
    });
</script>

注意:这种向url传递参数是以POST的形式提交的
data={'aa':123};
$("#d1").load("aa.php",data,function(){
$("#d2").html("done");
});

aa.php 可以这样接收
<?
sleep(2);
echo "I am a boy<br>".$_POST["aa"];
?>

load第三个参数的function可以有参数,就是返回的页面结果,如下例所示:
<script language="javascript">
 
$(document).ready(function(e) {
        $("#btn").click(function(){
   data={'aa':123};
$("#d1").load("aa.php",data,function(return_data){
                                                 //返回的结果已经放在了return_data中
$("#d2").html(return_data);
});
});
    });
</script>





 
  相关文章
本文标题:Jquery Load GET详解
对本文有疑问?现在就进入论坛提问>>
 
粤ICP备18090445号