一个例子探究jQuery的Ajax应用(二)

简介:

本来是一个示例来试试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();
         })
     }

页面变化:

165352541.png

说明: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,如需转载请自行联系原作者

相关文章
|
26天前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
12 0
|
1月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
37 0
|
2月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
2月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
33 0
|
2月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
32 0
|
JavaScript 前端开发 UED
精心挑选的12款优秀 jQuery Ajax 分页插件和教程
  在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1139 0
|
前端开发 JavaScript UED
分享精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了20个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示。Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 jQuery 框架很容易实现各种基于 Ajax 技术实现的功能。
1201 0
|
2月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
2月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
2月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
19 0