本文共 1689 字，大约阅读时间需要 5 分钟。
本来是一个示例来试试jQuery中的几个方法，通过实验来学习使用jQuery提供的便捷的Ajax,例子有点长，为了日后查阅代码贴上去了，一篇文字有点长，故此分开写。
不过内容还是比较独立，上一篇参见：
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的一篇文章：
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，如需转载请自行联系原作者