jQuery插件ajaxContent实现javascript通过ajax获取任意内容

或许从标题上看不出这个ajaxContent插件有什么特别，但如果你能看ajaxContent插件三个演示DEMO你就会觉得其功能很让你惊 讶，这是我对这个插件的看法，感觉像是在打广告，但这个jQuery插件确实不仅功能强大，而且使用非常简单，看一下最基本的使用实例：

jQuery官方ajaxContent文档介绍

jQuery插件ajaxContent演示[推荐]

jQuery官方ajaxContent下载

版本支持：jQuery library 1.2.1+
可选绑定支持：需要jquery.form.js插件

jQuery插件ajaxContent使用与配置

1，js代码部分
$('.ajax').ajaxContent();

2，Html代码部分
<a class="ajax" href="http://www.biuuu.com/good.jpg">图片</a>
<div id="ajaxContent"></div>

ajaxContent默认将ajax获取的内容显示在id为ajaxContent的元素中，点击如上图片链接将通过ajax获取路径 http://www.biuuu.com/good.jpg的图片，然后返回给id为ajaxContent的元素，其中href为需要获取内容的路 径，可以是图片、HTML页面等等任意元素，ajaxContent默认配置如下：

1，target: 'ajaxContent', //ajax获取内容后将要显示的ID层
2，type:'get',//ajax获取的方式，默认为get，可选post
3，event:'click',//ajax获取的触发事件，默认为点击，可选mouseover等事件
4，loader:'true',//是否显示加载提示
5，loaderType:'text',//加载提示的类型，默认文本，可选图片img
6，loadingMsg:'Loading...',//如果加载提示是文本需要提示的文字
7，errorMsg:'An error occured durign the page requesting process!',//加载错误提示信息
8，currentClass:'selected',//当前类
9，success:'',//加载成功后调用的方法
10，beforeSend:'',//加载前调用的方法
11，error:'',//加载错误调用的方法
12，bind:'',//绑定多个元素，例：bind:'name,secondName,dog,cat,sport'
13，debug:'false',//是否提示debug错误
14，extend:'false',//是否扩展
15，filter:'',//扩展的元素，例：filter:'.ajaxLoad',表示ajax加载获取的内容中类为ajaxLoad的绑定ajaxContent
16，ex_target:'',//扩展绑定获取内容后将要显示的ID层
17，ex_type:'get',//扩展绑定ajax获取的方式，默认为get，可选post
18，ex_event:'click',//扩展绑定ajax获取的触发事件，默认为点击，可选mouseover等事件
19，ex_loader:'true',同上loader
20，ex_loaderType:'text',同上loaderType
21，ex_loadingMsg:'Loading...',同上loadingMsg
22，ex_errorMsg:'An error occured durign the page requesting process!',同上errorMsg
23，ex_currentClass:'selected',同上currentClass
24，ex_success:'',同上success
25，ex_beforeSend:'',同上beforeSend
26，ex_error:'',同上error
27，ex_bind:''同上bind

jQuery插件ajaxContent可以给通过ajax获取的内容绑定ajaxContent，实现同样的功能，见下实例四。

jQuery插件ajaxContent实例

一，定义ajaxContent触发事件
js代码部分

  1. $('.ajax2').ajaxContent({
  2. event:'mouseover',
  3. target:'ajaxContent2'
  4. });

上面ajax获取内容通过mouseover事件触发
Html代码部分

  1. <a class="ajax2" href="http://www.biuuu.com/good.html">获取HTML内容</a>
  2. <div id="ajaxContent2"></div>

二，定义ajax加载提示(图示提示)

  1. $('.ajax3').ajaxContent({
  2. loaderType:'img',
  3. loadingMsg:'loading.gif',
  4. target:'ajaxContent3'
  5. });

三，定义ajax加载成功返回事件

  1. $('.ajax4').ajaxContent({
  2. target:'ajaxContent4',
  3. currentClass:"current",
  4. success: function(obj,target,msg){
  5. alert($(obj).attr('class'));
  6. }
  7. });

四，定义给ajax获取内容绑定ajaxContent方法

  1. $('.ajax9').ajaxContent({
  2. target:'ajaxContent10',
  3. extend:'true',
  4. filter:'.ajaxLoad',
  5. ex_target:'ajaxContent11',
  6. ex_loadingMsg:'This is a personalized loading message set by ex_loadingMsg option',
  7. ex_beforeSend:function(obj,target){
  8. alert('ex_beforeSend option callback');
  9. },
  10. ex_success:function(obj,target,msg){
  11. alert('ex_success option callback. The target background will now become red');
  12. $(target).css({backgroundColor:'red'});
  13. }
  14. });

五，实现获取表单值的效果图

ajaxcontent2

点击Click here将获取表单值，返回给DIV

由上实例可知jQuery插件ajaxContent使用非常方便，调用简单，非常值得推荐。

共有0个回答