Wordpress：如何通过ajax调用插件函数？

Question

我正在写一个Wordpress MU插件，它包括一个链接，每个帖子，我想用ajax来调用其中一个插件功能，当用户点击这个链接，然后动态更新链接文本的输出该功能。

我被ajax查询卡住了。我有这种复杂的，明显的黑客方式来做到这一点，但它并不完美。在插件中包含ajax功能的“正确”或“wordpress”方式是什么？

（我现在的黑客代码如下。当我点击链接生成我没有得到相同的输出我在wp页面获得，当我直接去采样ajax.php在我的浏览器。）

我有我的代码[1]设置如下：

MU-插件/ sample.php：

<?php 
/* 
Plugin Name: Sample Plugin 
*/ 
if (!class_exists("SamplePlugin")) { 
    class SamplePlugin { 
    function SamplePlugin() {} 
    function addHeaderCode() { 
     echo '<link type="text/css" rel="stylesheet" href="'.get_bloginfo('wpurl'). 
      '/wp-content/mu-plugins/sample/sample.css" />\n'; 
     wp_enqueue_script('sample-ajax', get_bloginfo('wpurl') . 
      '/wp-content/mu-plugins/sample/sample-ajax.js.php', 
      array('jquery'), '1.0'); 

    } 
    // adds the link to post content. 
    function addLink($content = '') { 
     $content .= "<span class='foobar clicked'><a href='#'>click</a></span>"; 
     return $content; 
    } 
    function doAjax() { // 
     echo "<a href='#'>AJAX!</a>"; 
    } 
    } 
} 
if (class_exists("SamplePlugin")) { 
    $sample_plugin = new SamplePlugin(); 
} 
if (isset($sample_plugin)) { 
    add_action('wp_head',array(&$sample_plugin,'addHeaderCode'),1); 
    add_filter('the_content', array(&$sample_plugin, 'addLink')); 
} 

MU-插件/样品/试样ajax.js.php：

<?php 
if (!function_exists('add_action')) { 
    require_once("../../../wp-config.php"); 
} 
?> 
jQuery(document).ready(function(){ 
    jQuery(".foobar").bind("click", function() { 
     var aref = this; 
     jQuery(this).toggleClass('clicked'); 
     jQuery.ajax({ 
      url: "http://mysite/wp-content/mu-plugins/sample/sample-ajax.php", 
      success: function(value) { 
      jQuery(aref).html(value); 
      } 
     }); 
    }); 
}); 

个

MU-插件/样品/样本ajax.php：

<?php 
if (!function_exists('add_action')) { 
    require_once("../../../wp-config.php"); 
} 
if (isset($sample_plugin)) { 
    $sample_plugin->doAjax(); 
} else { 
    echo "unset"; 
} 
?> 

[1]注：下面的教程让我这么远，但我在这一点难倒。 http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin

Answer 1

TheDeadMedic不太对。 WordPress内置了AJAX功能。发送您的Ajax请求使用POST与参数“行动”，以/wp-admin/admin-ajax.php：

jQuery(document).ready(function(){ 
    jQuery(".foobar").bind("click", function() { 
     jQuery(this).toggleClass('clicked'); 
     jQuery.ajax({ 
      type:'POST', 
      data:{action:'my_unique_action'}, 
      url: "http://mysite/wp-admin/admin-ajax.php", 
      success: function(value) { 
      jQuery(this).html(value); 
      } 
     }); 
    }); 
}); 

然后把它挂在这样的插件，如果你只希望它的工作为登录用户：

add_action('wp_ajax_my_unique_action',array($sample_plugin,'doAjax')); 

或把它挂像这样仅适用于非登录用户的工作：

add_action('wp_ajax_nopriv_my_unique_action',array($sample_plugin,'doAjax')); 

使用这两种，如果你希望它为每个人的工作。

admin-ajax.php已经使用了一些操作名称，因此请确保您查看文件并且不要使用相同的操作名称，否则您会不小心尝试执行删除注释等操作。

编辑

对不起，我不太了解这个问题。我以为你在问怎么做ajax请求。无论如何，我想尝试两件事：

首先，你的功能只是回声没有a标签的单词AJAX。接下来，尝试改变你的Ajax调用，这样它既有成功和完整的回调：

jQuery(document).ready(function(){ 
    jQuery(".foobar").bind("click", function() { 
     var val = ''; 
     jQuery(this).toggleClass('clicked'); 
     jQuery.ajax({ 
      type:'POST', 
      data:{action:'my_unique_action'}, 
      url: "http://mysite/wp-admin/admin-ajax.php", 
      success: function(value) { 
      val = value; 
      }, 
      complete: function(){ 
      jQuery(this).html(val); 
      } 
     }); 
    }); 
}); 

Answer 2

WordPress的环境

首先，为了实现这一任务，它的建议，然后排队登记一个将请求推送到服务器的jQuery脚本。这些操作将被挂钩在wp_enqueue_scripts的动作钩子中。在相同的钩子你应该把wp_localize_script，它被用来包括任意的Javascript。通过这种方式，将在前端提供一个JS对象。这个对象继承了jQuery句柄使用的正确url。

请看一看到：

1. wp_register_script();功能
2. wp_enqueue_scripts钩
3. wp_enqueue_script();功能
4. wp_localize_script();功能

文件：1/2的functions.php

add_action('wp_enqueue_scripts', 'so_enqueue_scripts'); 
function so_enqueue_scripts(){ 
    wp_register_script('ajaxHandle', get_template_directory() . 'PATH TO YOUR JS FILE', array(), false, true); 
    wp_enqueue_script('ajaxHandle'); 
    wp_localize_script('ajaxHandle', 'ajax_object', array('ajaxurl' => admin_url('admin-ajax.php'))); 
} 

文件：jquery.ajax.js

这个文件使Ajax调用。

jQuery(document).ready(function($){ 
    //Some event will trigger the ajax call, you can push whatever data to the server, simply passing it to the "data" object in ajax call 
    $.ajax({ 
    url: ajax_object.ajaxurl, // this is the object instantiated in wp_localize_script function 
    type: 'POST', 
    data:{ 
     action: 'myaction', // this is the function in your functions.php that will be triggered 
     name: 'John', 
     age: '38' 
    }, 
    success: function(data){ 
     //Do something with the result from server 
     console.log(data); 
    } 
    }); 
}); 

文件：functions.php的2/2

最后你的functions.php文件应该有你的Ajax调用触发的功能。 记住后缀：

1. wp_ajax（允许功能只对注册用户或管理员面板操作）
2. wp_ajax_nopriv（允许的功能没有权限的用户）

这些后缀加上动作构成你行动的名称：

wp_ajax_myaction或wp_ajax_nopriv_myaction

add_action('wp_ajax_myaction', 'so_wp_ajax_function'); 
add_action('wp_ajax_nopriv_myaction', 'so_wp_ajax_function'); 
function so_wp_ajax_function(){ 
    //DO whatever you want with data posted 
    //To send back a response you have to echo the result! 
    echo $_POST['name']; 
    echo $_POST['age']; 
    wp_die(); // ajax call must die to avoid trailing 0 in your response 
} 

希望它有帮助！

让我知道如果有什么不清楚。

Answer 3

只是为了添加信息。 如果您希望收到一个PHP类方法函数的对象：

JS文件

jQuery(document).ready(function(){ 
jQuery(".foobar").bind("click", function() { 
    var data = { 
     'action': 'getAllOptionsByAjax', 
     'arg1': 'val1', 
     'arg2': $(this).val() 
    }; 
    jQuery.post(ajaxurl, data, function(response) { 
     var jsonObj = JSON.parse(response); 
    }); 
}); 

PHP文件

public static function getAllOptionsByAjax(){ 

    global $wpdb; 

    // Start query string 
    $query_string = "SELECT * FROM wp_your_table WHERE col1='" . $_POST['arg1'] . "' AND col2 = '" . $_POST['arg2'] . "' "; 

    // Return results 
    $a_options = $wpdb->get_results($query_string, ARRAY_A); 
    $f_options = array(); 
    $f_options[null] = __('Please select an item', 'my_domain'); 
    foreach ($a_options as $option){ 
     $f_options [$option['id']] = $option['name']; 
    } 
    $json = json_encode($f_options); 
    echo $json; 
    wp_die(); 
}