WordPress AJAX获取内容帖子ID

时间:2017-02-01 作者:Adamko

我正试图在他的id之后下载帖子。

Debuger:

返回源:action=my\\u load\\u ajax\\u content+&;postid=147

操作:my\\u load\\u ajax\\u内容发布ID:147

尽管更改了postid,但它仍然得到相同的内容。我做错了什么,请帮忙。

代码:

custom.js

jQuery(function($){

    $(\'.get_project\').click(function() {

        var postid = $(this).attr(\'data-postid\');

        $.post(my_ajax_object.ajaxurl, {
            action: \'my_load_ajax_content \',            
            postid: postid
        }, function(data) {
            var $response   =   $(data);
            var postdata    =   $response.filter(\'#postdata\').html();
            $(\'.TARGETDIV\').html(postdata);
        });

    })


});

functions.php

function my_load_ajax_content () {
    $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>\';
}

add_action ( \'wp_ajax_nopriv_load-content\', \'my_load_ajax_content\' );
add_action ( \'wp_ajax_load-content\', \'my_load_ajax_content\' );

function my_enqueue() {
    wp_enqueue_script( \'ajax-script\', get_template_directory_uri() . \'/js/custom.js\', array(\'jquery\') );
    wp_localize_script( \'ajax-script\', \'my_ajax_object\',
            array( \'ajax_url\' => admin_url( \'admin-ajax.php\' ) ) );
}

add_action( \'wp_enqueue_scripts\', \'my_enqueue\' );

Button:

<button class="get_project" data-postid="147">Get project</button>
谢谢你。

1 个回复
SO网友:CodeMascot

您的代码中有许多错误和错误做法。大部分我都修好了。在这里解释所有这些是不可能的。我已经在他们需要的地方写了解释作为评论。请仔细阅读整个代码和注释-

custom.js

// Wrap any jQuery code like this. It makes \'$\' use fullproof
// and prevent also some other error.
(function($){
    // And always use \'use strict\' to make your JavaScript code mode strict.
    \'use strict\';
    // Wrap it with after the DOM is ready block.
    $(function (e) {
        // Try not to use click() method directly.
        // Rather try to delegate the event with on() method.
        $(\'.get_project\').on( \'click\', function(e) {
            e.preventDefault();
            var postid = $(this).attr(\'data-postid\');
            console.log(postid);
            // I don\'t know why the shorthand method had not worked for me as well
            // But this method has worked for me.
            $.ajax({
                type: "POST",
                url: my_ajax_object.ajax_url,
                data: {
                    action: \'my_load_ajax_content\',
                    postid: postid,
                }
            }).done(function (data) {
                // Just simple html() method with data will show all the content.
                $(\'.TARGETDIV\').html(data);
            });
        });
    });
})(jQuery);

functions.php

function my_load_ajax_content () {
    // You need to grab the data from $_POST variable
    // And must sanitize the data.
    $pid = intval($_POST[\'postid\']);
    $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 {
        // Since you\'re declared the $data variable before then assign the next value also in $data
        // And at the end just echo it.
        $data = \'<div id="postdata">\'.__(\'Didnt find anything\', THEME_NAME).\'</div>\';
    }
    wp_reset_postdata();

    echo \'<div id="postdata">\'. $data .\'</div>\';
    // And must die() the function
    die();
}
// The actual hook is wp_ajax_noprive_{$action} and wp_ajax_{$action}
// You action is my_load_ajax_content in JS. So your hook will be
add_action ( \'wp_ajax_nopriv_my_load_ajax_content\', \'my_load_ajax_content\' );
add_action ( \'wp_ajax_my_load_ajax_content\', \'my_load_ajax_content\' );

function my_enqueue() {
    // First register script
    wp_register_script( \'ajax-script\', get_template_directory_uri() . \'/js/custom.js\', array(\'jquery\') );
    // Localize script
    wp_localize_script( \'ajax-script\', \'my_ajax_object\',
        array( \'ajax_url\' => admin_url( \'admin-ajax.php\' ) )
    );
    // Then enqueue script
    wp_enqueue_script( \'ajax-script\' );
}

add_action( \'wp_enqueue_scripts\', \'my_enqueue\' );
此代码已测试。我自己测试过,它对我有效。

相关推荐

WordPress AJAX错误400向远程站点发送数据的错误请求

我正在使用发件人。net获取电子邮件订阅列表。这个网站给了我一些信息,可以将用户的电子邮件添加到订阅列表中。我想使用WordPress ajax来实现这一点。但它返回错误400错误请求。我的代码是:文件ajax新闻脚本。js公司: jQuery(document).ready(function($){ // Perform AJAX send news on form submit $(\'form#fnews\').on(\'submit\', funct