<p >或许从标题上看不出这个ajaxContent插件有什么特别，但如果你能看ajaxContent插件三个演示DEMO你就会觉得其功能很让你惊 讶，这是我对这个插件的看法，感觉像是在打广告，但这个jQuery插件确实不仅功能强大，而且使用非常简单，看一下最基本的使用实例：</p>
<p ><a href="http://plugins.jquery.com/project/ajaxContent" target="_blank">jQuery官方ajaxContent文档介绍</a></p>
<p ><a href="http://www.andreacfm.com/os/ajaxcontent/" target="_blank">jQuery插件ajaxContent演示</a>[推荐]</p>
<p ><a href="http://code.google.com/p/ajaxcontent/source/browse/" target="_blank">jQuery官方ajaxContent下载</a></p>
<p ><strong >版本支持</strong>：jQuery library 1.2.1+<br />
<strong >可选绑定支持</strong>：需要jquery.form.js插件</p>
<p ></p>
<p ><strong >jQuery插件ajaxContent使用与配置</strong></p>
<p ><strong >1，js代码部</strong>分<br />
$('<strong >.ajax</strong>').<strong >ajaxContent</strong>();</p>
<p ><strong >2，Html代码部分</strong><br />
<a class="<strong >ajax</strong>" href="<strong >http://www.biuuu.com/good.jpg</strong>">图片</a><br />
<div id="<strong >ajaxContent</strong>"></div></p>
<p >ajaxContent默认将ajax获取的内容显示在id为ajaxContent的元素中，点击如上图片链接将通过ajax获取路径 http://www.biuuu.com/good.jpg的图片，然后返回给id为ajaxContent的元素，其中href为需要获取内容的路 径，可以是图片、HTML页面等等任意元素，<strong >ajaxContent默认配置</strong>如下：</p>
<p >1，<strong >target</strong>: 'ajaxContent', //ajax获取内容后将要显示的ID层<br />
2，<strong >type</strong>:'get',//ajax获取的方式，默认为get，可选post<br />
3，<strong >event</strong>:'click',//ajax获取的触发事件，默认为点击，可选mouseover等事件<br />
4，<strong >loader</strong>:'true',//是否显示加载提示<br />
5，<strong >loaderType</strong>:'text',//加载提示的类型，默认文本，可选图片img<br />
6，<strong >loadingMsg</strong>:'Loading...',//如果加载提示是文本需要提示的文字<br />
7，<strong >errorMsg</strong>:'An error occured durign the page requesting process!',//加载错误提示信息<br />
8，<strong >currentClass</strong>:'selected',//当前类<br />
9，<strong >success</strong>:'',//加载成功后调用的方法<br />
10，<strong >beforeSend</strong>:'',//加载前调用的方法<br />
11，<strong >error</strong>:'',//加载错误调用的方法<br />
12，<strong >bind</strong>:'',//绑定多个元素，例：bind:'name,secondName,dog,cat,sport'<br />
13，<strong >debug</strong>:'false',//是否提示debug错误<br />
14，<strong >extend</strong>:'false',//是否扩展<br />
15，<strong >filter</strong>:'',//扩展的元素，例：filter:'.ajaxLoad',表示ajax加载获取的内容中类为ajaxLoad的绑定ajaxContent<br />
16，ex_target:'',//扩展绑定获取内容后将要显示的ID层<br />
17，ex_type:'get',//扩展绑定ajax获取的方式，默认为get，可选post<br />
18，ex_event:'click',//扩展绑定ajax获取的触发事件，默认为点击，可选mouseover等事件<br />
19，ex_loader:'true',同上loader<br />
20，ex_loaderType:'text',同上loaderType<br />
21，ex_loadingMsg:'Loading...',同上loadingMsg<br />
22，ex_errorMsg:'An error occured durign the page requesting process!',同上errorMsg<br />
23，ex_currentClass:'selected',同上currentClass<br />
24，ex_success:'',同上success<br />
25，ex_beforeSend:'',同上beforeSend<br />
26，ex_error:'',同上error<br />
27，ex_bind:''同上bind</p>
<p >jQuery插件ajaxContent可以给通过ajax获取的内容绑定ajaxContent，实现同样的功能，见下实例四。</p>
<p ><strong >jQuery插件ajaxContent实例</strong></p>
<p ><strong >一，定义ajaxContent触发事件</strong><br />
<strong >js代码部分</strong></p>
<ol >
<li >$('.ajax2').ajaxContent({</li>
<li ><strong >event</strong>:'mouseover',</li>
<li ><strong >target</strong>:'ajaxContent2'</li>
<li >});</li>
</ol>
<p >上面ajax获取内容通过mouseover事件触发<br />
<strong >Html代码部分</strong></p>
<ol >
<li ><a class="ajax2" href="<strong >http://www.biuuu.com/good.html</strong>">获取HTML内容</a></li>
<li ><div id="<strong >ajaxContent2</strong>"></div></li>
</ol>
<p ><strong >二，定义ajax加载提示</strong>(图示提示)</p>
<ol >
<li >$('.ajax3').ajaxContent({</li>
<li ><strong >loaderType</strong>:'img',</li>
<li ><strong >loadingMsg</strong>:'loading.gif',</li>
<li ><strong >target</strong>:'ajaxContent3'</li>
<li >});</li>
</ol>
<p ><strong >三，定义ajax加载成功返回事件</strong></p>
<ol >
<li >$('.ajax4').ajaxContent({</li>
<li >target:'ajaxContent4',</li>
<li >currentClass:"current",</li>
<li ><strong >success</strong>: function(obj,target,msg){</li>
<li >alert($(obj).attr('class'));</li>
<li >}</li>
<li >});</li>
</ol>
<p ><strong >四，定义给ajax获取内容绑定ajaxContent方法</strong></p>
<ol >
<li >$('.ajax9').ajaxContent({</li>
<li >target:'ajaxContent10',</li>
<li ><strong >extend</strong>:'true',</li>
<li ><strong >filter</strong>:'.ajaxLoad',</li>
<li >ex_<strong >target</strong>:'ajaxContent11',</li>
<li >ex_<strong >loadingMsg</strong>:'This is a personalized loading message set by ex_loadingMsg option',</li>
<li >ex_<strong >beforeSend</strong>:function(obj,target){</li>
<li >alert('ex_beforeSend option callback');</li>
<li >},</li>
<li >ex_<strong >success</strong>:function(obj,target,msg){</li>
<li >alert('ex_success option callback. The target background will now become red');</li>
<li >$(target).css({backgroundColor:'red'});</li>
<li >}</li>
<li >});</li>
</ol>
<p ><strong >五，实现获取表单值的效果图</strong></p>
<p ><img alt="" src="/up_pic/201706/1497191464483.png" /></p>
<p >点击Click here将获取表单值，返回给DIV</p>
<p >由上实例可知jQuery插件ajaxContent使用非常方便，调用简单，非常值得推荐。</p>