Использование AJAX в плагине WordPress

Я пытаюсь создать плагин WordPress, основанный на AJAX. Я прочитал учебник и сделал плагин, но он не работает. Я новичок в AJAX. Вот код, который я пробовал: 

<?php
class ajaxtest {

    function ajaxcontact() {
        ?>
        <div id="feedback"></div>
        <form name="myform" id="myform">
            <li>
                <label for fname>First Name</label><input type="text" id="fname" name="fname" value=""/>
            </li>
            <li>
                <label for lname>Last Name</label><input type="text" id="lname" name="lname" value=""/>
            </li>
            <input type="submit" value="Submit" id="submit" name="submit"/>
        </form>
        <script type="text/javascript">
            jQuery('#submit').submit(ajaxSubmit);

            function ajaxSubmit() {

                var newcontact = jQuery(this).serialize();

                jQuery.ajax({
                    type: "POST",
                    url: "/wp-admin/admin-ajax.php",
                    data: newcontact,
                    success: function(data) {
                        jQuery("#feedback").html(data);
                    }
                });

                return false;
            }
        </script>
        <?php
    }

    function addcontact() {
        $fname = $_POST['fname'];
        if ($fname != "") {
            echo "Your Data is" . $fname;
        } else {
            echo "Data you Entered is wrong";
        }

        die();
    }

}

function jquery_add_to_contact() {
    wp_enqueue_script('jquery');  // Enqueue jQuery that's already built into WordPress
}

add_action('wp_enqueue_scripts', 'jquery_add_to_contact');
add_action('wp_ajax_addcontact', array('ajaxtest', 'addcontact'));
add_action('wp_ajax_nopriv_addcontact', array('ajaxtest', 'addcontact')); // not really needed
add_shortcode('cform', array('ajaxtest', 'ajaxcontact'));

я использовал это как шорткод,но я не получил вывод. В чем ошибка?

7
jquery php wordpress

2 ответов

среда WordPress

во-первых, для достижения этой задачи рекомендуется зарегистрировать затем enqueue сценарий jQuery, который будет толкать запрос на сервер. Эти операции будут подключены в wp_enqueue_scripts крюк действий. В том же крючке вы должны поставить wp_localize_script что он используется для включения произвольного JavaScript. Таким образом, в интерфейсе будет доступен объект JS. Этот объект содержит правильный url-адрес, используемый дескриптором jQuery.

пожалуйста, посмотрите на:

  1. wp_register_script (); функции
  2. wp_enqueue_scripts крючком
  3. wp_enqueue_script (); функции
  4. wp_localize_script (); функции

в главном файле плагина добавьте их.

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

файл: jquery.Аякс.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 );
    }
  });
});

также добавьте эти файлы в основной файл плагина.

наконец, о ваших функциях.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
}
22

вам нужно добавить "действие" к вашему вызову AJAX.

jQuery.ajax({
  type: "POST",
  url: "/wp-admin/admin-ajax.php",
  data: newcontact,
  action: 'addcontact',
  success: function(data) {
    jQuery("#feedback").html(data);
  }
});

значение должно совпадать с крючком add_action для wp_ajax. например,

add_action( wp_action_{action_value}, 'myfunc' );

Это позволяет WordPress знать, какую функцию запускать при вызове AJAX.

на этой странице кодекса есть полезная информация и этой статье как лучше уточнить код, который у вас есть.

5