mathiregister
  • 0
Новичок

Wp_ajax() вопрос.. Не используете wp_enqueue_script?

  • 0

Привет, ребята, странная ситуация… Я впервые пытаюсь использовать wp_ajax(). Обычно я использую обычный ajax-запрос jQuery, но в моем текущем случае я получаю много ошибок, поэтому я подумал о том, чтобы попробовать wp_ajax().

Я не понимаю, хотя!

Следующий фрагмент кода…

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js' );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

заканчивается в…

<script type="text/javascript" src="http://example.com/wordpress/wp-content/plugins/myajax/js/ajax.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */

Однако у меня нет плагина или чего-то еще, что могло бы использовать это, но вся моя страница должна выполнять этот запрос ajax. Поэтому вся первая строка с wp_enqueue_script() не имеет смысла. Мне не нужно загружать для этого конкретный js-файл, потому что весь мой script.js файл уже вручную встроен в мой <head> раздел. Здесь срабатывает запрос ajax. Однако, как только я оставлю эту строку ( //wp_enqueue_script()... ), вторая часть не будет работать.

Так что не будет

<script type="text/javascript">
/* <![CDATA[ */
var MyAjax = {
    ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php"
};
/* ]]> */

быть напечатаны в моем разделе моей страницы. Что я здесь не так? Мне действительно нужно иметь возможность запускать запрос ajax из моего обычного файла script.js.

Есть идеи?

обновление: мой файл script.js (встроенный вручную в мой должен вызвать запрос ajax:

var response;
            $.post(
                // see tip #1 for how we declare global javascript variables
                MyAjax.ajaxurl,
                {
                    // here we declare the parameters to send along with the request
                    // this means the following action hooks will be fired:
                    // wp_ajax_nopriv_myajax-submit and wp_ajax_myajax-submit
                    action : 'wp_ajax_nopriv_searchmap',
                },
                function( response ) {
                    $sr.html(response);

функция в моем файле functions.php, которую я хочу вызвать, выглядит так:

// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'my-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js' );

// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

// this hook is fired if the current viewer is not logged in
if (isset($_GET['action'])) {
    do_action( 'wp_ajax_nopriv_' . $_GET['action'] );
}
// if logged in:
if (isset($_POST['action'])) {
    do_action( 'wp_ajax_' . $_POST['action'] );
}
if(is_admin()) {
    add_action( 'wp_ajax_searchmap', 'my_searchmap_function' );
} else {
    add_action( 'wp_ajax_nopriv_searchmap', 'my_searchmap_function' );
}

function my_searchmap_function() {

// Start output buffer
ob_start();
?>
div>
    <h3>Pages</h3>
        <ul>
            <?php wp_list_pages('title_li=&depth=0&exclude='); ?>
        </ul>
    <h3>Posts</h3>
        <?php $first = 0;?>
        <ul>
        <?php
        $myposts = get_posts('numberposts=-1&offset=$first');
        foreach($myposts as $post) :
        ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
        <?php endforeach; ?>
        </ul>
    <h3>Categories</h3>
        <ul>
            <?php wp_list_categories('title_li=&orderby=name'); ?>
        </ul>
</div>  
<?php 

    $output = ob_get_contents();

    // Stop output buffer
    ob_end_clean();
    $response = json_encode($output);

    // response output
    header( "Content-Type: application/json" );
    echo $response;

    // IMPORTANT: don't forget to "exit"
    exit;
}

Что я здесь не понимаю? Я просто хочу иметь возможность запрашивать данные через ajax из моего обычного файла javascript. Мне нужно обработать html, который возвращается в моем файле javascript.

Есть идеи, что я делаю неправильно или лучше, что мне нужно сделать, чтобы это сработало?

Share
  1. Хорошо, сначала позвольте мне немного разобрать это, чтобы вы поняли назначение этих функций.

    • wp_enqueue_script()

      Описание:
      безопасный способ добавления javascripts на страницу, сгенерированную WordPress. По сути, включите скрипт, если он еще не включен, и загрузите тот, который поставляется WordPress.

    • wp_localize_script()

      Описание:
      локализует скрипт, но только если скрипт уже добавлен. Также может использоваться для включения произвольных данных Javascript на страницу.

    Когда вы локализуете скрипт, все, что вы делаете, это настраиваете действие, которое выводит переменные Javascript на страницу, но эти переменные привязаны к сценарию, в котором вы их регистрируете, это первый параметр, которому вы передаете wp_localize_script, иначе известный как дескриптор скрипта.

    wp_enqueue_script предназначен для постановки файла javascript в очередь и wp_localize_script предназначен для сопровождения сценариев, загружаемых через систему постановки в очередь. Вы ничего не можете локализовать, поэтому, если вы не ставите в очередь, wp_localize_script это вам здесь не поможет.

    Как правило, вы, вероятно, использовали бы два вот так.

    $myvars = array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'somevar1' => $somevar_from_somewhere,
        'somevar2' => $somevar_from_elsewhere
    );
    wp_enqueue_script( 'my-ajax-request', plugins_url( '/path/to/somefile.js', __FILE__ ) );
    wp_localize_script( 'my-ajax-request', 'MyAjax', $myvars );
    

    Что затем производит следующий вывод на вашей странице.

    <script type="text/javascript" src="path/to/somefile.js"></script>
    
    <script type="text/javascript">
    /* <![CDATA[ */
    var MyAjax = {
        ajaxurl: "http://example.com/wordpress/wp-admin/admin-ajax.php",
        somevar1: "somevalue",
        somevar2: "someothervalue"
    };
    /* ]]> */
    </script>
    

    На что вы затем можете ссылаться в своем сценарии, например.

    jQuery(document).ready( function($) {
    
        alert( MyAjax.somevar1 ); // Produces somevalue
        alert( MyAjax.somevar2 ); // Produces someothervalue
    
    });
    

    Собрав все это вместе, ваш код может выглядеть примерно так.

    // Setup the ajax callback for the "searchmap" action 
    add_action( 'wp_ajax_searchmap', 'my_searchmap_function' );
    add_action( 'wp_ajax_nopriv_searchmap', 'my_searchmap_function' );
    
    // The callback function for the "searchmap" action
    function my_searchmap_function() {
        $myposts = get_posts('numberposts=-1&offset=$first');
    ?>
    <div> 
        <h3>Pages</h3>
        <ul>
            <?php wp_list_pages('title_li=&depth=0&exclude='); ?>
        </ul>
    
        <h3>Posts</h3>
        <ul>
            <?php foreach( $myposts as $post ) : setup_postdata( $post ); ?>
    
            <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    
            <?php endforeach; ?>
            <?php wp_reset_postdata(); ?>
        </ul>
    
        <h3>Categories</h3>
        <ul>
        <?php wp_list_categories('title_li=&orderby=name'); ?>
        </ul>
    </div>  
    <?php 
        die;
    }
    

    JS.. (при условии, что он был поставлен в очередь и локализован)

    jQuery(document).ready(function($) {
        $('a.myajax').click(function(){
            var data = {
                action: 'searchmap' // <--- this is the correct action name
            };
            $.post( MyAjax.ajaxurl, data, function(response) {
                $('#myresult').html(response);
            });
            return false;
        });
    });
    

    А затем фактический HTML-код, необходимый на странице для запуска действия.

    <a class="myajax" href="#">Click me to fetch ajax content</a>
    <div id="myresult"></div>
    

    Фактический ответ

    Что касается необходимости делать что-то свое и распечатывать вары для вашего скрипта, я бы предложил сделать что-то вроде этого…

    add_action( 'wp_head', 'my_js_vars', 1000 );
    
    function my_js_vars() {
    
        // If it's not a specific page, stop here
        if( !is_page( 'my-page-with-ajax' ) )
            return;
        ?>
        <script type="text/javascript">
        /* <![CDATA[ */
        var MyAjax = {
            ajaxurl: '<?php admin_url('admin-ajax.php'); ?>',
                somevar: 'somevalue',
                someothervar: 'someothervalue'
        };
        /* ]]> */
        </script>
        <?php
        /*
           NOTE: 
           Make sure not to leave a comma after the last item 
           in the JS array, else IE(Internet Explorer) will choke on the JS.
        */
    }
    

    Я оставил код, который я ранее опубликовал, чтобы другие читали.

    • 0
  2. Этот учебник в кодексе дает простой обзор процесса:

    http://codex.wordpress.org/AJAX_in_Plugins

    Обратите внимание, что ajaxurl переменная уже определена ядром WP, но только в админке. Чтобы добавить его в интерфейс, используйте:

    <?php
    function pluginname_ajaxurl() {
    ?>
    <script type="text/javascript">
    var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
    </script>
    <?php
    }
    add_action('wp_head','pluginname_ajaxurl');
    
    • 0

Оставить ответ

You must login to add an answer.