此插件至关强悍,但最后一个版本是在2008年,做者好久没更新了,我在寻找了好多关羽ajax的工具,没有发现比这个更灵活的了,也发现了与此插件相似的,近期有更新,但相比之下尚未这个成熟,我在后台中就应用了它,
网址,
http://max.jsrhost.com/ajaxify/ 英文的,推荐用google浏览器浏览,自动翻译,被墙了的话用代理吧
说一下简单用法,第一步,载入jq库和此插件
复制代码
- <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
- <script type="text/javascript" src="jquery.ajaxify.js"></script>
|
而后写出选择器代码
复制代码
- <script type="text/javascript">
- $('.demo').ajaxify();
- </script>
|
这样就能够在页面中使用ajax连接了
---------------------------------------------------------------------------------------------------------------------------------------------------
使用方法
好比超连接
复制代码
- <a class="demo" href="index.php" target="#container">载入index.php的内容载入到container</a>
- <div id="container"></div>
|
这个例子就是将index.php里的内容动态加载到id为“container”的div中,在学习ajax过程当中你会遇到使用js的InnerHtml载入<script>标签没法运行的状况,这个插件没有这个问题,你能够动态载入任何内容,(除jquery库文件和插件自己外)
插件用法至关灵活另外一种用法
复制代码
- <a id="demo" href="#">这是超连接</a>
- <div id="container"></div>
-
- <script type="text/javascript">
- $('#demo').ajaxify({
- link:'index.php',
- target: '#container'
- });
- </script>
|
-------------------------------------------------------------
以上例子举出了如何使用ajax请求,那么咱们知道ajax是向div载入少许代码,而且不能载入jquery库怎么办?若是我想要向div载入index.php中的一部分代码怎么办?
很简单,好比index.php中的代码是这样的,
复制代码
- echo "1111111111";
- echo "2222222222";
|
我只想向div载入index.php中的1111111111这个代码片断,首先你要在php文件中做出标记:像这样
复制代码
-
- if($ajax==true){
- echo "1111111111";
- }else{
- echo "2222222222";
- }
|
而后要用到这个插件中全局配置中的参数,插件默认的是,“ajax=true”,
也就是说你要这样写
复制代码
- <script type="text/javascript">
- $('#demo').ajaxify({
- link:'index.php?ajax=true', //其实这里你也能够没必要加上“ajax=true”由于你的连接请求是经过这个ajax插件,也就默认含有ajax=true只是你看不见而已
- target: '#container'
- });
- </script>
|
这样即可让container只载入index.php中的echo"1111111"; 的代码了,
这个例子讲的是,你能够只动态载入少许html代码,而不用在此载入大量的js、和css样式,只要加上ajax=true就是ajax请求,你能够根据要求用语句执行,哪些为ajax请求时不须要载入的代码,而不加也不会影响你正常超连接请求时的css样式和js功能
---------------------------------------------------------------------------------------------------------------------
ajax提交表单的方法(其实就多了一个form标签的id)
复制代码
-
- <form id="form1">
- 表单内容
- <a id="demo" href="">提交表单</a>
- </form>
-
- <div id="container">这里显示提交表单后返回的参数</div>
-
- <script type="text/javascript">
- $('#demo').ajaxify({
- forms:'#form1',
- link:'index.php',
- target: '#container'
- });
- </script>
|
我举得例子都是至关简单的,官方站立包含了至关详细的例子,包括load图片参数、触发参数,如点击触发,双击触发,页面载入完毕后触发,某表单获得焦点后触发(可做为表单验证),表单失去焦点后触发等