本来是一个示例来试试jQuery中的几个方法，通过实验来学习使用jQuery提供的便捷的Ajax,例子有点长，为了日后查阅代码贴上去了，一篇文字有点长，故此分开写。
不过内容还是比较独立，上一篇参见：http://aiilive.blog.51cto.com/1925756/1304319
1.jQuery的load()方法，远程载入HTML插入到DOM中：
|
1
2
3
4
5
|
<div>
页面：<input type="text" id="url" name="url" />
<input type="button" id="get" value="加载" />
<div id="urlcontent"></div>
</div>
|
Ajax实现：
|
1
2
3
4
5
6
7
8
9
10
11
|
function getURL() {
var v_url = $("#url").val();
if (v_url == "") {
alert("请输入网址!");
return;
}
$("#urlcontent").load(v_url, null, function(data) {
$("#urlcontent").show();
})
}
|
页面变化：
说明：index.html是当前页面，因此将当前页面加载到div中，所以出现如上图相同的信息。
注意：远程HTML是不能跨域进行，如果要跨域就要绕过同源策略限制，使用JSONP（JSON with Padding）来实现。参见IBM的一篇文章：http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
2.jQuery的getJSON()方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function getJSON() {
$
.getJSON(
"http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data) {
$("#imageDiv").html("");
$.each(data['items'], function(i, v) {
$("<img class='para'/>").attr("src", v.media.m)
.appendTo("#imageDiv");
if (i == 5) {
return false;
}
})
})
}
$("#loadMsg").ajaxStart(function() {
$(this).show();
});
$("#loadMsg").ajaxStop(function() {
$(this).hide();
})
|
|
1
2
3
4
5
|
<div>
<input id="wether" type="button" value="获取JSON数据" />
<div id="loadMsg">请稍等，数据正在加载...</div>
<div id="imageDiv"></div>
</div>
|
说明：
ajaxStart()和ajaxStop()方法属于jQuery自定义的全局函数，能够为各种与Ajax相关的事件注册回调函数，ajaxStart()在Ajax请求开始时触发，ajaxStop()在Ajax请求结束的时候触发。
关于jQuery的Ajax实现基本功能实验就做了这些，实际应用中，灵活使用，比如加载JSON数据，XML数据，get,post请求操作等。
本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/1304356，如需转载请自行联系原作者
