jQuery 06 Ajax
2015-06-04 00:00
741 查看
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>
只加载指定的元素，可以在url参数后筛选指定元素
<script language="javascript" type="text/javascript">
$(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>
<script language="javascript" >
$(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>
$.get()
$.get(url,[,data][,callback][,type])
<script language="javascript" >
$(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>
<%
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>
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>");
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>
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>
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>
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>");
<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>
<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": "地板."
}
]
<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的形式存在，所有参数都是可选的
<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);
<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"
}
]
})
serialize()，序列化元素可以吧DOM元素内容序列化为字符串，用于Ajax请求。
<script language="javascript" >
$(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>
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>
$.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>
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>
如果在执行Ajax方法时，不想触发全局方法可以在使用$.ajax(options)时，将参数中的global设置为false。
$.ajax({
url:"test.html",
global:false
});
在jQuery1.5版本之后，可以用
$.ajaxPrefilter(function( options ) {
options.global = true;
});
$.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>
只加载指定的元素，可以在url参数后筛选指定元素
<script language="javascript" type="text/javascript">
$(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>
<script language="javascript" >
$(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>
$.get()
$.get(url,[,data][,callback][,type])
| url | 请求的HTML的URL |
| data | key/value数据 |
| callback | 载入成功后的回调函数，只有response的返回状态是success才调用 |
| type | 返回内容格式:xml,html,script,json,text,default |
$(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>
<%
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>
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>");
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>
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>
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>
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>");
<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>
<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": "地板."
}
]
<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将不会触发。 |
$(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);
<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"
}
]
})
serialize()，序列化元素可以吧DOM元素内容序列化为字符串，用于Ajax请求。
<script language="javascript" >
$(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>
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>
$.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>
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>
| ajaxComplete(callback) | 请求完成时执行 |
| ajaxError(callback) | 请求发生错误是执行 |
| ajaxSend(callback) | 请求发送前执行 |
| ajaxSuccess(callback) | 请求成功时执行 |
$.ajax({
url:"test.html",
global:false
});
在jQuery1.5版本之后，可以用
$.ajaxPrefilter(function( options ) {
options.global = true;
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery 07 编写插件
- jQuery 03 DOM操作
- jQuery 04 事件和动画
- jquery-uploadify3.2使用心得
- JavaScript及jQuery常用dom操作方法
- 通过IP获取地区省市
- jquery 事件冒泡的介绍以及如何阻止事件冒泡
- jquery的$.extend和$.fn.extend作用及区别
- jquery scroll 自动加载内容
- Jquery 选择器注意的问题--记录（五）
- Jquery有哪些选择器
- 递归查询构造jquery tree
- Jquery基础(六) js方法清空cookie的各种方法
- jQuery插件之ajaxFileUpload
- JS-jquery mobile基础
- JS-jquery mobile事件
- jQuery Validate
- JQuery分页处理(后端)
- Jquery html encode & decode
- jquery 常用选择器及方法