推荐一款jQueryajax插件（Ajaxify jQuery ）

时间：2024-01-19 13:07:08

推荐一款jQueryajax插件（Ajaxify jQuery ）

此插件相当强悍，但最后一个版本是在2008年，作者很久没更新了，我在寻找了好多关羽ajax的工具，没有发现比这个更灵活的了，也发现了与此插件类似的，近期有更新，但相比之下还没有这个成熟，我在后台中就应用了它，

网址，http://max.jsrhost.com/ajaxify/    
英文的，推荐用google浏览器浏览，自动翻译，被墙了的话用代理吧

说一下简单用法，第一步，载入jq库和此插件

复制代码

  1. <script type="text/javascript"
    src="jquery-1.4.4.min.js"></script>
  2. <script type="text/javascript"
    src="jquery.ajaxify.js"></script>

然后写出选择器代码

复制代码

  1. <script type="text/javascript">
  2. $('.demo').ajaxify();
  3. </script>

这样就可以在页面中使用ajax链接了
---------------------------------------------------------------------------------------------------------------------------------------------------
使用方法

比如超链接

复制代码

  1. <a class="demo" href="index.php"
    target="#container">载入index.php的内容载入到container</a>
  2. <div
    id="container"></div>

这个例子就是将index.php里的内容动态加载到id为“container”的div中，在学习ajax过程中你会遇到使用js的InnerHtml载入<script>标签无法运行的情况，这个插件没有这个问题，你可以动态载入任何内容，（除jquery库文件和插件本身外）

插件用法相当灵活另一种用法

复制代码

  1. <a id="demo" href="#">这是超链接</a>
  2. <div id="container"></div>
  3. <script type="text/javascript">
  4. $('#demo').ajaxify({
  5. link:'index.php',
  6. target: '#container'
  7. });
  8. </script>

-------------------------------------------------------------

以上例子举出了如何使用ajax请求，那么我们知道ajax是向div载入少量代码，并且不能载入jquery库怎么办？如果我想要向div载入index.php中的一部分代码怎么办？

很简单，比如index.php中的代码是这样的，

复制代码

  1. echo "1111111111";
  2. echo
    "2222222222";

我只想向div载入index.php中的1111111111这个代码片段，首先你要在php文件中作出标记：像这样

复制代码

  1. if($ajax==true){
  2. echo "1111111111";
  3. }else{
  4. echo "2222222222";
  5. }

然后要用到这个插件中全局配置中的参数，插件默认的是，“ajax=true”，

也就是说你要这样写

复制代码

  1. <script type="text/javascript">
  2. $('#demo').ajaxify({
  3. link:'index.php?ajax=true',    //其实这里你也可以不必加上“ajax=true”因为你的链接请求是通过这个ajax插件，也就默认含有ajax=true只是你看不见而已
  4. target: '#container'
  5. });
  6. </script>

这样便可让container只载入index.php中的echo"1111111";
的代码了，

这个例子讲的是，你可以只动态载入少量html代码，而不用在此载入大量的js、和css样式，只要加上ajax=true就是ajax请求，你可以根据要求用语句执行，哪些为ajax请求时不需要载入的代码，而不加也不会影响你正常超链接请求时的css样式和js功能

---------------------------------------------------------------------------------------------------------------------

ajax提交表单的方法(其实就多了一个form标签的id)

复制代码

  1. <form id="form1">
  2. 表单内容
  3. <a id="demo" href="">提交表单</a>
  4. </form>
  5. <div id="container">这里显示提交表单后返回的参数</div>
  6. <script type="text/javascript">
  7. $('#demo').ajaxify({
  8. forms:'#form1',
  9. link:'index.php',
  10. target: '#container'
  11. });
  12. </script>

我举得例子都是相当简单的，官方站立包含了相当详细的例子，包括load图片参数、触发参数，如点击触发，双击触发，页面载入完毕后触发，某表单得到焦点后触发（可作为表单验证），表单失去焦点后触发等

相关文章