牛牛逼逼叉叉
菜单

wordpress ajax 简单的例子

2016年06月14日,分类《windows》,作者:
博客捐助

序言
今天是星期一,是我发文章的日子。最近在搞一个东西,就是将ajax运用到wordpress中,大家可以看我的博客,里面有很多的ajax的东西,包括:
1.首页的分页的ajax
2.评论分页的ajax
3.侧边栏评论的最近评论ajax
4.评论ajax提交
后面的文章将逐步介绍如何实现上面的ajax功能,这篇文章的主要目的是让大家了解ajax的用法,用一个简单的例子说明ajax的使用,让大家能很快上手ajax,写出自己需要的ajax程序。

ajax的优缺点
缺点:
1. 各个浏览器对XMLHttpRequest对象的支持度不足(兼容性问题)
2. 破坏浏览器的前进,后退功能。
3. 对搜索引擎支持不足。
4. 调试工具支持不足。
5. 编程比较复杂
6. 需要多加载jquery.js和自定义的js,第一次加载会影响速度
优点:
1. 加载需要的页面,避免重复加载
2. 使用使用时的体验较好
3. 可以装一下,毕竟主题支持动态加载,nb啊,呵呵

ajax的需要的元素
元素包括:
1. 一个html页面,这里包含了有css标记的元素,比如a,可以供js来寻找,在用户点击的时候发出ajax请求
2. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js
3. 定义的js文件,规定请求的动作,和接受数据之后的动作
4. 后台模板中的functions.php定义一个函数,用了规定接受到ajax请求之后后台要做的动作。

元素的位置:
1. html就在文章中写即可
2. jquery.js在header.php中包含

  1. <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js”></script>

复制代码

3.把自己定义的js保存为 test.js,同样在header.php中包含

  1. <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/functions/test.js”></script>

复制代码

4.functions.php中添加行数即可

例子的运行情况
见:http://localhost/9.html

html部分
你随便写一个文章,用html模式,把下面的代码贴进去就可以了。注意将
http://localhost/?navi=2 换成你的http://自己域名/?navi=2

  1. <div class=”test_response”>
  2. <div> 返回结果的位置 </div>
  3. <div class=”test_navi”>
  4. <a href=”http://127.0.0.1/dhblog/?navi=1″>第一页</a> <a href=”http://dhblog.org/?navi=2″>第二页</a> <a href=”http://127.0.0.1/dhblog/?navi=3″>第三页</a>
  5. </div>
  6. </div>

复制代码

js部分
下面的代码保存为 test.js文件,放到模板里面,记得在header.php中包含哦

  1. var tnavi=’.test_navi’;
  2. var tnavi_a=’.test_navi a’;
  3. var tresponse=’.test_response’;
  4. $(document).ready(function test_navi(){
  5.         $(tnavi_a).click(function() {
  6.                 var z = $(this).attr(“href”);
  7.                 $.ajax({
  8.                         url: z,
  9.                         type:”POST”,
  10.                         data:”action=test_action”,
  11.                         beforeSend:function()
  12.                         {
  13.                                 document.body.style.cursor = ‘wait’;
  14.                                 var C=0.7;
  15.                                 $(tresponse).css({opacity:C,MozOpacity:C,KhtmlOpacity:C,filter:’alpha(opacity=’ + C * 100 + ‘)’});
  16.                                 $(tnavi).html(‘<a>载入中…</a>’);
  17.                         },
  18.                         error:function (xhr, textStatus, thrownError){
  19.                                 alert(“readyState: ” + xhr.readyState + ” status:” + xhr.status + ” statusText:” + xhr.statusText +” responseText:” +xhr.responseText + ” responseXML:” + xhr.responseXML + ” onreadystatechange” +xhr.onreadystatechange);
  20.                                 alert(thrownError);
  21.                         },
  22.                         success: function (data)
  23.                         {
  24.                                 //alert(data);
  25.                                 $(tresponse).html(data);
  26.                                 document.body.style.cursor = ‘auto’;
  27.                                 test_navi();//翻页后DOM变化了,需要重新绑定函数
  28.                         }
  29.                 });
  30.                 return false;
  31.                 });
  32. })

复制代码

后台php部分
下面的代码放到functiongs.php中,http://localhost/?navi=2 换成你的http://自己域名/?navi=2

  1. /*****************************************************
  2. 函数名称:test_action_do
  3. 函数作用:简单的ajax的例子
  4. 行数作者:dhblog
  5. ******************************************************/
  6. function test_action_do(){
  7.         if( isset($_POST[‘action’])&& $_POST[‘action’] == ‘test_action’){
  8.                 $navi=$_GET[‘navi’];
  9.                 echo ‘<div class=”test_response”>’;
  10.                 echo ‘<div> 我是ajax返回的结果哦!您选择的第’. $navi .’页</div>’;
  11.                 echo ‘<div class=”test_navi”>’;
  12.                 echo ‘<a href=”http://127.0.0.1/dhblog/?navi=1″>第一页</a> ‘;
  13.                 echo ‘<a href=”http://127.0.0.1/dhblog/?navi=2″>第二页</a> ‘;
  14.                 echo ‘<a href=”http://127.0.0.1/dhblog/?navi=3″>第三页</a>’;
  15.                 echo ‘</div>’;
  16.                 echo ‘</div>’;
  17.                 die();
  18.         }else{
  19.                 return;
  20.         }
  21. }
  22. add_action(‘template_redirect’, ‘test_action_do’);

复制代码

希望大家通过上面的例子能够理解ajax的工作过程,能做好ajax学习的第一步!



发表评论

电子邮件地址不会被公开。 必填项已用*标注

【上一篇】

mysql数据库单机数十亿数据查询设计

【下一篇】

WWDC第一天,黑马程序员全国首发iOS 10教程