一个例子探究jQuery的Ajax应用(二)
2013-10-03 17:06
453 查看
本来是一个示例来试试jQuery中的几个方法,通过实验来学习使用jQuery提供的便捷的Ajax,例子有点长,为了日后查阅代码贴上去了,一篇文字有点长,故此分开写。
不过内容还是比较独立,上一篇参见:/article/4249654.html
1.jQuery的load()方法,远程载入HTML插入到DOM中:
说明:index.html是当前页面,因此将当前页面加载到div中,所以出现如上图相同的信息。
注意:远程HTML是不能跨域进行,如果要跨域就要绕过同源策略限制,使用JSONP(JSON with Padding)来实现。参见IBM的一篇文章:http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/
2.jQuery的getJSON()方法
ajaxStart()和ajaxStop()方法属于jQuery自定义的全局函数,能够为各种与Ajax相关的事件注册回调函数,ajaxStart()在Ajax请求开始时触发,ajaxStop()在Ajax请求结束的时候触发。
关于jQuery的Ajax实现基本功能实验就做了这些,实际应用中,灵活使用,比如加载JSON数据,XML数据,get,post请求操作等。
本文出自 “野马红尘” 博客,谢绝转载!
不过内容还是比较独立,上一篇参见:/article/4249654.html
1.jQuery的load()方法,远程载入HTML插入到DOM中:
<div> 页面:<input type="text" id="url" name="url" /> <input type="button" id="get" value="加载" /> <div id="urlcontent"></div> </div>Ajax实现:
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()方法
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(); })
<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请求操作等。
本文出自 “野马红尘” 博客,谢绝转载!
相关文章推荐
- 一个例子探究jQuery的Ajax应用(一)
- 一个jquery-ajax post例子ajax 登陆
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 转:一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 【转】jQuery+Ajax+PHP登录实例 一个简单的用Jquery中ajax方法登录的例子
- jQuery/Ajax/PHP/Json 的一个综合例子
- 企业开发中js,Jquery,Ajax和json格式的一个例子
- JQuery+AJAX异步刷新的一个基础应用(检验用户名是否已存在)
- jQuery/Ajax/PHP/Json 的一个综合例子
- Infinite Ajax Scroll一个jQuery插件应用介绍
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jquery的ajax返回json数据另外一个例子(不继承json-default)
- jQuery/Ajax/PHP/Json 的一个综合例子
- playframework中ajax的应用例子(jQuery)
- 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
- jQuery/Ajax/PHP/Json 的一个综合例子
- 本文简单讲诉jQuery处理json与ajax返回的Json的一个例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- jQuery/Ajax/PHP/Json 的一个综合例子