jquery学习札记-ajax应用
日期：2014-05-16 浏览次数：20866 次
jquery学习笔记--ajax应用
直切主题,介绍方法
$("#div").load(url,data,callback);
url:String类型 请求HTML页面的URL地址
data(可选) Object类型 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败
url
注: url部分,可填写过滤器,得到符合条件的数据返回 语法结构 "url selector" url和选择器之间有一个空格
例: $("#div").load("test.html .seleted");
传递方式
load()方法的传递方式根据参数data来自动指定,如果没有参数传递,则采用get,反之则会自动转换为post方式
$("#div").load("test.jsp",{name:"rain",age:"22"},function(){});
回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调参数(callback),该参数有3个参数,分别代表请求返回的内容,请求状态(success和error)和XMLHttpRequest对象
$("#div").load("test.jsp",function(responseText,textStatus,XMLHttpRequest){
//responseText 请求返回的内容
//textStatus:success,error,notmodified,timeout4种
//XMLHttpRequest对象
}）
从其他网站copy的总结的相当完善
jQuery中的Ajax
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load(),$.get()和$.post()方法，第三层是$.getScript()和$.getJson()方法。首先介绍第2层得方法，使用效率很高。
load()方法
1.载入HTML文档
load()方式jQuery中最为简单的Ajax方法，能载入远程HTML代码并插入DOM中，它的结构为:
load(url[,data][,callback]);
load()方法参数解释如表6-1所示。
load参数说明：
参数名称 类型 说明
url string 请求html的url地址
data(可选) object 发送至服务器的key/value数据
callback function 请求完成时的回调函数，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>
</body>
</html>
test.html 页面里并没有添加样式，但现在加载的内容有样式了，这些样式是在主页面中添加的，
即主页面相应的样式会立即应用到新加载的内容上。
传递方式
load()方法得传递方式根据参数data来自动指定，如果没有参数传递，则采用get方式传递;反之，
则自动转换为post方式。
//无参数传递
$("#resText").laod("test.php",function(){
});
//有参数传递，则是post方式
$("#resText").laod("test.php",{name:"rain",age:"22"},function(){
});
回调参数
对于必须加载完后才能继续操作，load()方法提供了回调函数(callback),该函数有3个参数，
分别代表请求返回的内容，请求状态和XMLHttpRequest 对象，jQuery代码如下:
$("#resText").laod("test.html",function(responseText,textStatus,XMLHttpRequest)){
//请求返回的内容
//请求状态 success error notmodiffed,timeout 4种
//XMLHttpRequest: XMLHttpRequest
}
在load()方法中，无论Ajax请求是否成功，只要当请求完成co
直切主题,介绍方法
$("#div").load(url,data,callback);
url:String类型 请求HTML页面的URL地址
data(可选) Object类型 发送至服务器的key/value数据
callback(可选) Function 请求完成时的回调函数,无论请求成功或失败
url
注: url部分,可填写过滤器,得到符合条件的数据返回 语法结构 "url selector" url和选择器之间有一个空格
例: $("#div").load("test.html .seleted");
传递方式
load()方法的传递方式根据参数data来自动指定,如果没有参数传递,则采用get,反之则会自动转换为post方式
$("#div").load("test.jsp",{name:"rain",age:"22"},function(){});
回调参数
对于必须在加载完成后才能继续的操作,load()方法提供了回调参数(callback),该参数有3个参数,分别代表请求返回的内容,请求状态(success和error)和XMLHttpRequest对象
$("#div").load("test.jsp",function(responseText,textStatus,XMLHttpRequest){
//responseText 请求返回的内容
//textStatus:success,error,notmodified,timeout4种
//XMLHttpRequest对象
}）
从其他网站copy的总结的相当完善
jQuery中的Ajax
jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load(),$.get()和$.post()方法，第三层是$.getScript()和$.getJson()方法。首先介绍第2层得方法，使用效率很高。
load()方法
1.载入HTML文档
load()方式jQuery中最为简单的Ajax方法，能载入远程HTML代码并插入DOM中，它的结构为:
load(url[,data][,callback]);
load()方法参数解释如表6-1所示。
load参数说明：
参数名称 类型 说明
url string 请求html的url地址
data(可选) object 发送至服务器的key/value数据
callback function 请求完成时的回调函数，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText").load("test.html");
})
})
</script>
</head>
<body>
<input type="button" id="send" value="Ajax获取" />
<div class="comment">
已有评论：
</div>
<div id="resText" ></div>
</body>
</html>
test.html 页面里并没有添加样式，但现在加载的内容有样式了，这些样式是在主页面中添加的，
即主页面相应的样式会立即应用到新加载的内容上。
传递方式
load()方法得传递方式根据参数data来自动指定，如果没有参数传递，则采用get方式传递;反之，
则自动转换为post方式。
//无参数传递
$("#resText").laod("test.php",function(){
});
//有参数传递，则是post方式
$("#resText").laod("test.php",{name:"rain",age:"22"},function(){
});
回调参数
对于必须加载完后才能继续操作，load()方法提供了回调函数(callback),该函数有3个参数，
分别代表请求返回的内容，请求状态和XMLHttpRequest 对象，jQuery代码如下:
$("#resText").laod("test.html",function(responseText,textStatus,XMLHttpRequest)){
//请求返回的内容
//请求状态 success error notmodiffed,timeout 4种
//XMLHttpRequest: XMLHttpRequest
}
在load()方法中，无论Ajax请求是否成功，只要当请求完成co
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
