jQuery对 Ajax进行封装,在jQuery中
$.ajax()方法是属于最底层的方法,第2层是load(),$.get(),$post(),第3层是$.getScript()和$.getJSON()
load(),是最常用的Ajax方法,能载入远程的HTML代码并插入DOM中
load(url,[,data][,callback])
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText"). load("test.html");
})
})
</script>
$(function(){
$("#send").click(function(){
$("#resText"). load("test.html");
})
})
</script>
只加载指定的元素,可以在url参数后筛选指定元素
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText"). load("test.html .para");
})
})
</script>
$(function(){
$("#send").click(function(){
$("#resText"). load("test.html .para");
})
})
</script>
<script language="javascript" type="text/javascript">
$(function(){
$("#send").click(function(){
$("#resText"). load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert( $(this).html() ); //在这里this指向的是当前的DOM对象,即 $("#iptText")[0]
alert( responseText); //请求返回的内容
alert( textStatus); //请求状态:success,error
alert( XMLHttpRequest); //XMLHttpRequest对象
});
})
})
</script>
$(function(){
$("#send").click(function(){
$("#resText"). load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
alert( $(this).html() ); //在这里this指向的是当前的DOM对象,即 $("#iptText")[0]
alert( responseText); //请求返回的内容
alert( textStatus); //请求状态:success,error
alert( XMLHttpRequest); //XMLHttpRequest对象
});
})
})
</script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
$("#resText"). load("get1.jsp?username="+$('#username').val()+"&content="+$('#content').val())
});//中文也需要编码
})
</script>
$(function(){
$("#send").click(function(){
$("#resText"). load("get1.jsp?username="+$('#username').val()+"&content="+$('#content').val())
});//中文也需要编码
})
</script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
$("#resText"). load("post1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}); //中文不需要编码
})
})
</script>
$(function(){
$("#send").click(function(){
$("#resText"). load("post1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}); //中文不需要编码
})
})
</script>
$.get()
$.get(url,[,data][,callback][,type])
url | 请求的HTML的URL |
data | key/value数据 |
callback | 载入成功后的回调函数,只有response的返回状态是success才调用 |
type | 返回内容格式:xml,html,script,json,text,default |
<script language="javascript" >
$(function(){
$("#send").click(function(){
$.get("get1.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
$(function(){
$("#send").click(function(){
$.get("get1.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
// 只在success 时才调用
//
textStatus 请求状态:success,error,notmodified,timeout
$("#resText").html(
decodeURI(data)
); // 把返回的数据添加到页面上
}
);
})
})
</script>
}
);
})
})
</script>
<%
String username = request.getParameter("username");
String content = request.getParameter("content");
out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>");
%>
String username = request.getParameter("username");
String content = request.getParameter("content");
out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>");
%>
返回xml格式
<script language="javascript" >
$(function(){
$("#send").click(function(){
$. get("get2.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
username = decodeURI(username);
content = decodeURI(content);
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
} ,"xml");
})
})
</script>
$(function(){
$("#send").click(function(){
$. get("get2.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
username = decodeURI(username);
content = decodeURI(content);
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
} ,"xml");
})
})
</script>
response.setContentType("text/xml");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");
JSON文件
<script language="javascript" >
$(function(){
$("#send").click(function(){
$. get("get3.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
var username = data.username;
var content = data.content;
username = decodeURI(username);
content = decodeURI(content);
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
}, "json");
})
})
</script>
$(function(){
$("#send").click(function(){
$. get("get3.jsp", {
username : encodeURI( $("#username").val() ) ,
content : encodeURI( $("#content").val() )
}, function (data, textStatus){
var username = data.username;
var content = data.content;
username = decodeURI(username);
content = decodeURI(content);
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
}, "json");
})
})
</script>
out.println("
{ \"username\" : '"+username+"' , \"content\" : '"+content+"'}");
$.post()
<script language="javascript" >
$(function(){
$("#send").click(function(){
$. post("post1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
$(function(){
$("#send").click(function(){
$. post("post1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>");
<script language="javascript" >
$(function(){
$("#send").click(function(){
$. post("post2.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
}, "xml");
})
})
</script>
$(function(){
$("#send").click(function(){
$. post("post2.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
var username = $(data).find("comment").attr("username");
var content = $(data).find("comment content").text();
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
}, "xml");
})
})
</script>
response.setContentType("text/xml");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<comments>");
out.println("<comment username='"+username+"'>");
out.println("<content>"+content+"</content>");
out.println("</comment>");
out.println("</comments>");
<script language="javascript" >
$(function(){
$("#send").click(function(){
$. post("post3.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
var username = data.username;
var content = data.content;
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
$("#resText").html(txtHtml); // 把返回的数据添加到页面上
}, "json");
})
})
</script>
$.getScript(),直接加载js文件
<script>
$(function(){
$.getScript('jquery.color.js', function(){
$("<p>加载JavaScript完毕</p>").appendTo("body");
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
})
</script>
$(function(){
$.getScript('jquery.color.js', function(){
$("<p>加载JavaScript完毕</p>").appendTo("body");
$("#go").click(function(){
$(".block").animate( { backgroundColor: 'pink' }, 1000)
.animate( { backgroundColor: 'blue' }, 1000);
});
});
})
</script>
<script>
$(function(){
$('#send').click(function() {
$.getJSON('test.json', function(data) {
$('#resText'). empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
})
})
})
</script>
test.json:
[
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
<script>
$(function(){
$('#send').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json &jsoncallback=?",
function(data){
$.each(data.items, function(i,item ){
$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
if ( i == 3 ) {
return false;
}
});
}
);
})
})
</script>
$(function(){
$('#send').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json &jsoncallback=?",
function(data){
$.each(data.items, function(i,item ){
$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
if ( i == 3 ) {
return false;
}
});
}
);
})
})
</script>
$.ajax(),是jQuery最底层的Ajax实现。
$.ajax(options)
方法只有1个参数,key/value的形式存在,所有参数都是可选的
url | |
type |
POST/GET
|
timeout | 设置请求超时时间(毫秒),此设置将覆盖$.ajaxSetup()方法的全局设置 |
data | 数据。 |
dataType | 预期返回的数据类型,如果不指定,将根据HTTP包的MIME信息返回responseXML或responseText,并作为回调函数参数传递 xml,htmk,script,json,jsonp,text |
beforeSend | 发送请求前可以修改XMLHttpRequest对象,例如添加自定义HTTP头。在beforeSend中返回false,可以取消本次Ajax请求。 function(XMLHttpRequest){ this; //调用本次Ajax请求时传递的options参数 } |
complete | 请求完成后调用的回调函数(成功或失败时均调用)。
function(XMLHttpRequest,textStatus){
this; //调用本次Ajax请求时传递的options参数 } |
success | 成功后调用
function(data,textStatus){
this; //调用本次Ajax请求时传递的options参数 } |
error | 失败时调用
function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThrown只有一个包含信息
this; //调用本次Ajax请求时传递的options参数
} |
global | 默认为true。表示是否触发全局Ajax事件。设置为false将不会触发。 |
<script>
$(function(){
$('#send').click(function() {
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
})
</script>
$(function(){
$('#send').click(function() {
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
})
</script>
test.js
var comments = [
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
];
var html = '';
$.each( comments , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
];
var html = '';
$.each( comments , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
<script>
$(function(){
$('#send').click(function() {
$.ajax({
type: "GET",
url: "test.json",
dataType: "json",
success : function(data){
$('#resText').empty();
var html = '';
$.each( data , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
}
});
});
})
</script>
<script>
$(function(){
$('#send').click(function() {
$.ajax({
type: "GET",
url: "http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json& jsoncallback=?",
dataType: "jsonp",
success : function(data){
$.each(data.items, function( i,item ){
$("<img class='para'/> ").attr("src", item.media.m ).appendTo("#resText");
if ( i == 3 ) {
return false;
}
});
}
});
});
})
</script>
jQuery1710028403484120225975_1374674876860({
"title": "Recent Uploads tagged car",
"link": "http://www.flickr.com/photos/tags/car/",
"description": "",
"modified": "2013-07-24T14:03:55Z",
"generator": "http://www.flickr.com/",
" items": [
{
"title": "1/24 スポーツカー No.78 1/",
"link": "http://www.flickr.com/photos/98196270@N08/9356513851/",
" media": {"m":"http://farm3.staticflickr.com/2817/9356513851_1b5f24de4a_m.jpg"},
"date_taken": "2013-07-24T07:03:55-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/98196270@N08/\">unioh5181<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/98196270@N08/9356513851/\" title=\"1/24 スポーツカー No.78 1/\"><img src=\"http://farm3.staticflickr.com/2817/9356513851_1b5f24de4a_m.jpg\" width=\"240\" height=\"148\" alt=\"1/24 スポーツカー No.78 1/\" /><\/a><\/p> <p>【評価】5.0【レビュー数】1 URL→<\/p>",
"published": "2013-07-24T14:03:55Z",
"author": "nobody@flickr.com (unioh5181)",
"author_id": "98196270@N08",
"tags": "car"
},
{
"title": "Drive it",
"link": "http://www.flickr.com/photos/dousa/9359298652/",
"media": {"m":"http://farm8.staticflickr.com/7314/9359298652_6252cffd1f_m.jpg"},
"date_taken": "2013-07-20T13:31:36-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/dousa/\">David Douša<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/dousa/9359298652/\" title=\"Drive it\"><img src=\"http://farm8.staticflickr.com/7314/9359298652_6252cffd1f_m.jpg\" width=\"240\" height=\"159\" alt=\"Drive it\" /><\/a><\/p> ",
"published": "2013-07-24T14:05:27Z",
"author": "nobody@flickr.com (David Douša)",
"author_id": "92994565@N04",
"tags": "red chevrolet car corvette"
}
]
})
"title": "Recent Uploads tagged car",
"link": "http://www.flickr.com/photos/tags/car/",
"description": "",
"modified": "2013-07-24T14:03:55Z",
"generator": "http://www.flickr.com/",
" items": [
{
"title": "1/24 スポーツカー No.78 1/",
"link": "http://www.flickr.com/photos/98196270@N08/9356513851/",
" media": {"m":"http://farm3.staticflickr.com/2817/9356513851_1b5f24de4a_m.jpg"},
"date_taken": "2013-07-24T07:03:55-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/98196270@N08/\">unioh5181<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/98196270@N08/9356513851/\" title=\"1/24 スポーツカー No.78 1/\"><img src=\"http://farm3.staticflickr.com/2817/9356513851_1b5f24de4a_m.jpg\" width=\"240\" height=\"148\" alt=\"1/24 スポーツカー No.78 1/\" /><\/a><\/p> <p>【評価】5.0【レビュー数】1 URL→<\/p>",
"published": "2013-07-24T14:03:55Z",
"author": "nobody@flickr.com (unioh5181)",
"author_id": "98196270@N08",
"tags": "car"
},
{
"title": "Drive it",
"link": "http://www.flickr.com/photos/dousa/9359298652/",
"media": {"m":"http://farm8.staticflickr.com/7314/9359298652_6252cffd1f_m.jpg"},
"date_taken": "2013-07-20T13:31:36-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/dousa/\">David Douša<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/dousa/9359298652/\" title=\"Drive it\"><img src=\"http://farm8.staticflickr.com/7314/9359298652_6252cffd1f_m.jpg\" width=\"240\" height=\"159\" alt=\"Drive it\" /><\/a><\/p> ",
"published": "2013-07-24T14:05:27Z",
"author": "nobody@flickr.com (David Douša)",
"author_id": "92994565@N04",
"tags": "red chevrolet car corvette"
}
]
})
serialize(),序列化元素可以吧DOM元素内容序列化为字符串,用于Ajax请求。
<script language="javascript" >
$(function(){
$("#send").click(function(){
$.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
$(function(){
$("#send").click(function(){
$.post("get1.jsp", $("#form1").serialize() , function (data, textStatus){
$("#resText").html(data); // 把返回的数据添加到页面上
}
);
})
})
</script>
<script language="javascript" >
$(function(){
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
})
</script>
$("#send").click(function(){
var $data = $(":checkbox,:radio").serialize();
alert( $data );
})
})
</script>
serializeArray(),可以序列化为JSON格式数据
<script type="text/javascript">
$(function(){
var fields = $(":checkbox,:radio"). serializeArray();
console.log(fields);// Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
</script>
$(function(){
var fields = $(":checkbox,:radio"). serializeArray();
console.log(fields);// Firebug输出
$.each( fields, function(i, field){
$("#results").append(field.value + " , ");
});
})
</script>
$.param(),可以对数组或对象按照key/value进行序列化。
<script type="text/javascript">
//<![CDATA[
$(function(){
var obj={a:1,b:2,c:3};
var k = $. param(obj);
alert(k) // 输出 a=1&b=2&c=3
})
//]]>
</script>
//<![CDATA[
$(function(){
var obj={a:1,b:2,c:3};
var k = $. param(obj);
alert(k) // 输出 a=1&b=2&c=3
})
//]]>
</script>
jQuery 提供一些自定义全局函数,能够为各种与Ajax相关的事件注册回调函数。Ajax请求开始时,触发ajaxStart().请求结束时,触发ajaxStop().这些方法都是全局的。
<script>
$(function(){
//demo1:
$('#send1').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
function(data){
$("#resText1").empty();
$.each(data.items, function( i,item ){
$("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
if ( i == 3 ) {
return false;
}
});
}
);
});
//demo2:
$("#send2").click(function(){
$.post("get1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText2").html(data); // 把返回的数据添加到页面上
}
);
})
$. ajaxPrefilter(function( options ) {
options.global = true;
});
//共用这2个全局的ajax事件
$("#loading"). ajaxStart(function(){
$(this).show();
});
$("#loading"). ajaxStop(function(){
$(this).hide();
});
})
</script>
$(function(){
//demo1:
$('#send1').click(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",
function(data){
$("#resText1").empty();
$.each(data.items, function( i,item ){
$("<img/> ").attr("src", item.media.m ).appendTo("#resText1");
if ( i == 3 ) {
return false;
}
});
}
);
});
//demo2:
$("#send2").click(function(){
$.post("get1.jsp", {
username : $("#username").val() ,
content : $("#content").val()
}, function (data, textStatus){
$("#resText2").html(data); // 把返回的数据添加到页面上
}
);
})
$. ajaxPrefilter(function( options ) {
options.global = true;
});
//共用这2个全局的ajax事件
$("#loading"). ajaxStart(function(){
$(this).show();
});
$("#loading"). ajaxStop(function(){
$(this).hide();
});
})
</script>
ajaxComplete(callback) | 请求完成时执行 |
ajaxError(callback) | 请求发生错误是执行 |
ajaxSend(callback) | 请求发送前执行 |
ajaxSuccess(callback) |
请求成功时执行
|
如果在执行Ajax方法时,不想触发全局方法可以在使用$.ajax(options)时,将参数中的global设置为false。
$.ajax({
url:"test.html",
global:false
});
在jQuery1.5版本之后,可以用
$.ajaxPrefilter(function( options ) {
options.global = true;
});
options.global = true;
});