【问题标题】:ReferenceError: ajax_object is not defined when loading Wordpress post via AjaxReferenceError:通过 Ajax 加载 Wordpress 帖子时未定义 ajax_object
【发布时间】:2016-08-18 12:04:54
【问题描述】:

我一直在尝试在此线程中实施@SaiveSEO 的建议: Proper way to load a single post via Ajax?

想法:单击按钮并通过 AJAX 加载帖子。想法是您将拥有一个按钮树,让人们可以快速导航到有用的内容。

不幸的是,它失败了。

在控制台中,我收到消息“ReferenceError: ajax_object is not defined”,它指的是“$.post(ajax_object.ajaxurl...”这一行

我做错了什么?

这是我的 HTML:

<button class="get_project" data-postid="3300">PROJECT NAME</button>
                <div class="postcontainer"></div>

这是我的 Javascript:

    jQuery(function($){
    $('.get_project').click(function() {
        var postid = $(this).data('postid'); // Amended by @dingo_d
        $.post(ajax_object.ajaxurl, {
            action: 'my_load_ajax_content ',
            postid: postid
        }, function(data) {
            var $response   =   $(data);
            var postdata    =   $response.filter('#postdata').html();
            $('.postcontainer').html(postdata);
        });

    })
    //alert( "hello world" );
});

这是我的functions.php文件中的php:

function my_load_ajax_content () {

    $pid        = intval($_POST['post_id']);
    $the_query  = new WP_Query(array('p' => $pid));

    if ($the_query->have_posts()) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            $data = '
            <div class="post-container">
                <div id="project-content">
                    <h1 class="entry-title">'.get_the_title().'</h1>
                    <div class="entry-content">'.get_the_content().'</div>
                </div>
            </div>
            ';

        }
    }
    else {
        echo '<div id="postdata">'.__('Didnt find anything', THEME_NAME).'</div>';
    }
    wp_reset_postdata();


    echo '<div id="postdata">'.$data.'</div>';
}

// Next two lines corrected - thanks @dingo_d    
add_action ( 'wp_ajax_my_load_ajax_content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_nopriv_my_load_ajax_content', 'my_load_ajax_content' );

脚本入队函数中的functions.php中也需要:

wp_enqueue_script( 'myajaxpostloader',  get_template_directory_uri().'/js/ajax.js', array( 'jquery' ), '1.0', true );

wp_localize_script( 'myajaxpostloader', 'ajax_object', array(
    'ajaxurl' => admin_url( 'admin-ajax.php' )
));

(请注意,我的 Javascript 保存为 /js/ajax.js,其中 /js/ 是 Wordpress 主题的子目录)。

【问题讨论】:

    标签: ajax wordpress


    【解决方案1】:

    您没有本地化您的 ajax 对象。在 215 主题中你会这样做 - 在 functions.php 你会放

    wp_localize_script( 'twentyfifteen-script', 'ajax_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
    

    您的脚本在哪里排队。

    在你的主题中,一定要使用正确的句柄——而不是'twentyfifteen-script',把你的ajax代码放在其中。所以如果你的ajax JavaScript位于一个名为custom.js的文件中,并且你已经将它排入队列带有句柄 custom_js 的脚本,然后你会放

    wp_localize_script( 'custom_js', 'ajax_object', array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
    ));
    

    在您将该脚本排入队列之后。总而言之,在您的 functions.php 中,您会这样写:

    add_action('after_setup_theme', 'mytheme_theme_setup');
    
    if ( ! function_exists( 'mytheme_theme_setup' ) ){
        function mytheme_theme_setup(){
            add_action( 'wp_enqueue_scripts', 'mytheme_scripts');
        }
    }
    
    if ( ! function_exists( 'mytheme_scripts' ) ){
        function mytheme_scripts() {
            wp_enqueue_script( 'custom_js', get_template_directory_uri().'/js/custom.js', array( 'jquery'), '1.0.0', true );
            wp_localize_script( 'custom_js', 'ajax_object', array(
                'ajaxurl' => admin_url( 'admin-ajax.php' ),
            ));
        }
    }
    

    或者至少寻找这样的代码并将本地化放置在那里:)

    【讨论】:

    • 谢谢,@dingo_d - 实际上我确实对脚本进行了排队和本地化,但我并没有真正理解 localize_script 代码,所以这是一个很大的帮助。但是,我的脚本现在返回 0 作为 HTML 结果。知道为什么吗?
    • 确保 var postid = $(this).attr('data-postid'); 返回正确的帖子 ID。我会改用var postid = $(this).data('postid');。
    • 谢谢@dingo_d,但这不是问题——还有一些更基本的东西。我尝试将函数更改为此... function my_load_ajax_content () { echo 'hello world'; ...但它仍然每次都返回 0。知道怎么了?!
    • 您的操作应该是:add_action ( 'wp_ajax_my_load_ajax_content', 'my_load_ajax_content' ); add_action ( 'wp_ajax_nopriv_my_load_ajax_content', 'my_load_ajax_content' );
    • 很高兴我能帮上忙 :) 我有一个教程,在这里我回答了一个关于使用 AJAX 的问题,请随时查看here :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-31
    • 1970-01-01
    • 1970-01-01
    • 2013-12-28
    • 1970-01-01
    相关资源
    最近更新 更多