本来是一个示例来试试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
;
}
//这里的URL不能跨域
$(
"#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() {
//这是来自http://flickr.com站点的JSON数据
$
.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,如需转载请自行联系原作者