web-dev-qa-db-ja.com

WordPress ajaxのコンテンツ投稿IDの取得

私は彼のIDの後に投稿をダウンロードしようとしています。

デデューサー：

ソースを返します：action = my_load_ajax_content +＆postid = 147

アクション：my_load_ajax_content位置：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 class="get_project" data-postid="147">Get project</button>

ありがとうございました。

ajaxget-posts
1
Adamko

あなたのコードにはたくさんのエラーと悪い習慣があります。私はそれらのほとんどを修正しました。ここでそれらすべてを説明することは不可能です。私は彼らが必要とするところにコメントとして説明を書いた。コード全体とコメントを注意深く読んでください -

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

このコードはテスト済みです。私はそれを自分でテストし、それは私のために働いた。

4
CodeMascot