主题猫-WordPress中文主题站 > wordpress教程 > wordpress开发教程:原生态的wordpress ajax

wordpress开发教程:原生态的wordpress ajax

萨龙网络|专注高端网站设计与开发,为您提供一个现代、干净的WEB站点!

最近小V(本站好友)在开发一款自适应的wordpress博客主题,该wordpress主题大量数据展示与提交都用到了ajax技术,所以小V特意写一篇教程记录下,方便其他wordpress开发者做wordpress ajax应用开发的时候做参考。如果有些小伙伴还不知道什么是ajax,请自行百度脑补~~,闲话就不多说了,教程开始。
不少开发者在写插件时喜欢用以下方式实现ajax:

  1. require_once( '../../../../wp-config.php' );

就连百度站长平台官方开发的wordpress结构化数据提交插件也是如此实现ajax的,这是一种极其不合理的写法,因为一旦用户设置的目录不同, 相对路径就会失效.并且, 如果你在你的插件中使用的是面向对象的写法, 你将无法直接使用一些变量和私有方法. 最大的坏处就是会导致整个Wordpress的框架额外重新加载一遍,严重的影响了网站的运行效率。

其实,wordpress为了方便开发者开发带有ajax功能的插件主题已经预定义好了ajax方法,我们只需按照官方预留的方法去使用就好了。在开发wordpress ajax你要先了解的是,不管是后台还是前台任何的Ajax请求都是在admin-ajax.php处理的,向admin-ajax.php发送请求的时候, 有一个必须的参数是$_REQUEST['action'], 因为admin-ajax.php需要根据用户是否登陆了来触发不同的hooks。

  1. if ( is_user_logged_in() ) {  
  2.     /** 
  3.      * Fires authenticated AJAX actions for logged-in users. 
  4.      * 
  5.      * The dynamic portion of the hook name, `$_REQUEST['action']`, 
  6.      * refers to the name of the AJAX action callback being fired. 
  7.      * 
  8.      * @since 2.1.0 
  9.      */  
  10.     do_action( 'wp_ajax_' . $_REQUEST['action'] );  
  11. else {  
  12.     /** 
  13.      * Fires non-authenticated AJAX actions for logged-out users. 
  14.      * 
  15.      * The dynamic portion of the hook name, `$_REQUEST['action']`, 
  16.      * refers to the name of the AJAX action callback being fired. 
  17.      * 
  18.      * @since 2.8.0 
  19.      */  
  20.     do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );  
  21. }  

以上代码取自wordpress系统文件admin-ajax.php,从以上代码我们可以看出我们要发起一个请求首先要知道这个请求是否在登录状态下发起的?不同状态触发的hook也不一样,下面是个在主题利用jquery实现ajax的示例代码:

  1. add_action( 'wp_head', 'v7v3AjaxScript');  
  2. function v7v3AjaxScript(){  
  3.     print '<script>var v7v3_ajaxurl = "'. admin_url( 'admin-ajax.php' ) . '"' . ";</script>n";  
  4.     print "<script> 
  5.     $(docunment).ready(function(){ 
  6.         $.ajax( { 
  7.             url: v7v3_ajaxurl, 
  8.             data:{ 
  9.                 action : 'is_login' 
  10.             }, 
  11.             type:'post', 
  12.             cache:false, 
  13.             success:function(data) { 
  14.                 alert(data); 
  15.             } 
  16.         }); 
  17.     }); 
  18.     </scrip>";  
  19. }  
  20.      
  21. add_action( 'wp_ajax_nopriv_is_login', 'v7v3_ajax_not_login' );  
  22. add_action( 'wp_ajax_is_login', 'v7v3_ajax_is_login' );  
  23.      
  24. function v7v3_ajax_is_login(){  
  25.     global $current_user;  
  26.     get_currentuserinfo();  
  27.     printf( '登录用户您好 : %s!', $current_user->display_name );  
  28.     //函数结束前的die或exit很重要,一定要加。  
  29.     die;  
  30. }  
  31.      
  32. function v7v3_ajax_not_login(){  
  33.     print '尊敬的访客您好!';  
  34.     //函数结束前的die或exit很重要,一定要加。  
  35.     die;  
  36. }  

在开发wordpress ajax应用中最重要的一点就是函数结束之前一定要加die或者exit,如果不加的话会把整个wordpress框架都重新加载一遍。

wordpress精仿虎嗅网wordpress主题

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群

主题猫WP建站,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
在线咨询 意见反馈