Wordpress: Wie ruft man eine Plugin-Funktion mit einem Ajax-Aufruf auf?

Question

Ich schreibe ein Wordpress MU-Plugin, es enthält einen Link zu jedem Beitrag und ich möchte mit Ajax eine der Plugin-Funktionen aufrufen, wenn der Benutzer auf diesen Link klickt, und dann dynamisch den Link-Text mit der Ausgabe aktualisieren diese Funktion.

Ich bin mit der Ajax-Abfrage fest. Ich habe diesen komplizierten, klar hack-ish, Weg, es zu tun, aber es funktioniert nicht ganz. Was ist der 'richtige' oder 'Wordpress' Weg um die Ajax Funktionalität in ein Plugin zu integrieren?

(Mein aktueller Hack Code ist unten. Wenn ich den Link generieren klicken wir nicht bekommen die gleiche Ausgabe ich in der wp Seite bekommen, als wenn ich direkt zu Probe-ajax.php in meinem Browser.)

ich meinen Code habe [1] wie folgt festgelegt:

mu-plugins/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-plugins/Probe/sample-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-plugins/Probe/sample-ajax.php:

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

[1] Hinweis: Das folgende Tutorial hat mich bis hierher, aber ich bin an dieser Stelle ratlos. http://www.devlounge.net/articles/using-ajax-with-your-wordpress-plugin

Answer 1

TheDeadMedic ist nicht ganz richtig. WordPress verfügt über integrierte AJAX-Funktionen. Senden Sie Ihre Ajax-Request an /wp-admin/admin-ajax.php POST mit dem Argument ‚action‘:

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); 
      } 
     }); 
    }); 
}); 

es dann, wie dies in der Plug-Haken, wenn Sie es wollen für eingeloggte Benutzer arbeiten :

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

oder Haken wie dies in den Benutzern für nicht protokollierte nur arbeiten:

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

Verwenden beide, wenn Sie es für alle arbeiten wollen.

admin-ajax.php verwendet bereits einige Aktionsnamen, also stellen Sie sicher, dass Sie die Datei durchsehen und nicht die gleichen Aktionsnamen verwenden, sonst werden Sie versehentlich Dinge wie das Löschen von Kommentaren usw. tun.

EDIT

Sorry, ich habe die Frage nicht ganz verstanden. Ich dachte, du fragst, wie man eine Ajax-Anfrage macht. Wie auch immer, zwei Dinge, die ich versuchen würde:

Erstens, haben Sie Ihre Funktion echo nur das Wort AJAX ohne die a Tag. Als nächstes versuchen Sie Ihren Ajax-Aufruf zu ändern, so dass es sowohl einen Erfolg und eine komplette Callback hat:

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 Umgebung

Zunächst einmal, um diese Aufgabe zu erreichen, ist es dann registrieren empfohlen enqueue Ein jQuery-Skript, das die Anfrage an den Server sendet. Diese Operationen werden in wp_enqueue_scripts Aktionshaken eingehängt.In den gleichen Haken sollten Sie wp_localize_script setzen, dass es verwendet wird, um beliebiges Javascript einzuschließen. Auf diese Weise wird ein JS-Objekt im Frontend verfügbar sein. Dieses Objekt führt die richtige URL weiter, die vom jQuery-Handle verwendet werden soll.

Bitte nehmen Sie sich einen Blick auf:

1. wp_register_script(); Funktion
2. wp_enqueue_scripts Haken
3. wp_enqueue_script(); Funktion
4. wp_localize_script(); Funktion

Datei: functions.php 1/2

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'))); 
} 

Datei: jquery.ajax.js

Diese Datei macht den Ajax-Aufruf.

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); 
    } 
    }); 
}); 

Datei: functions.php 2/2

schließlich auf Ihrer functions.php Datei sollte die Funktion von Ihrem Ajax-Aufruf ausgelöst werden. Denken Sie daran, die Endungen:

1. wp_ajax (erlauben die Funktion nur für registrierte Benutzer oder Admin-Panel-Operationen)
2. wp_ajax_nopriv (erlauben die Funktion für keine Berechtigung, um Benutzern)

Diese Suffixe plus der Aktion compose der Name Ihrer Aktion:

wp_ajax_myaction oder 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 
} 

Hoffe es hilft!

Lassen Sie mich wissen, wenn etwas nicht klar ist.

Answer 3

Nur um eine Information hinzuzufügen. Wenn Sie ein Objekt aus einer PHP-Klasse Methode Funktion erhalten möchten:

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-Datei

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(); 
}