Question

这是HTML Nav：

<ul class="sub-menu side-nav page-sidebar child-pages">
    <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-9045" data-id="105"><a href="#History" class="menu-image-title-after"><span class="menu-image-title">History</span></a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-9046" data-id="185"><a href="#Strategic Plan" class="menu-image-title-after"><span class="menu-image-title">Strategic Plan</span></a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-post menu-item-9047" data-id="183"><a href="#Financial Statements" class="menu-image-title-after"><span class="menu-image-title">Financial Statements</span></a></li>
</ul>

这是我的PHP函数：

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );
function my_load_ajax_content(){
    $post_id = $_POST[ 'post_id' ];
    $post = get_post( $post_id, OBJECT);
    $response = array( apply_filters( 'the_content', $post->post_title ), apply_filters( 'the_content', $post->post_content ) );
    echo '<div class="entry-header"><h1 class="entry-title">'.$response[0].'</h1></div><div class="entry-content">'.$response[1].'</div>';
    die(1);
}
wp_enqueue_script( 'my-ajax-request', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

这里有ajax.js中的内容：

jQuery(document).ready(function($) {

    $(window).on('load',Foundation.utils.throttle(function(e){

      if($('.current-menu-item > .sub-menu')){
        $('#sidebar-b').append($('.current-menu-item > .sub-menu').addClass('side-nav page-sidebar child-pages'));
        $("#sidebar-b .menu-item a:not(.pdf)").each(function(){
            var link_text = $(this).children('.menu-image-title').html();
            $(this).attr('href','#'+link_text);
        });
      }

    },300));

    $("#sidebar-b .menu-item .menu-image-title-after").click(function(e) {
        $("#loading-animation").show();
        var post_id = $(this).parent("li").attr("data-id");
        var ajaxURL = MyAjax.ajaxurl;

        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {"action":"load-content",post_id:post_id},
            success: function(response){
              $("#content > article").html(response);
              $("#loading-animation").hide();
              return false;
            }
        });
    });
});

此外，在检查<head>时，我注意到我的ajax.js脚本甚至没有加载，即使它已在我的PHP功能中加入。关于我做错什么的任何想法？我在过去的3个小时内搜索过谷歌并且没有找到确切的答案。

Answer 1

1，你必须确保你的脚本是在正确的元素上触发的

2，你应该改变：＆＃34;动作＆＃34;：＆＃34;加载内容＆＃34;行动：＆＃39;加载内容＆＃39; （删除行动中的双引号）

Answer 2

您需要使用下面提到的方式将脚本排入队列，然后它将与wp_enqueue_scripts挂钩并正确加载：

  function load_scripts() {
    wp_enqueue_script( 'my-ajax-request', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
    wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

    }

add_action( 'wp_enqueue_scripts', 'load_scripts' );

希望它对你有所帮助。

Answer 3

最终，经过几天的反复试验，我最终得到了AJAX！秘诀是让ajax.js成为匿名函数。

(function($){

  $(document).on('click','.ajax-click',function(e){

    e.preventDefault();

    var post_id = $(this).parent().attr('data-id');
    var ajaxURL = MyAjax.ajaxurl;

    $.ajax({
      cache: false,
      type: "POST",
      url: ajaxURL,
      data:{ action: "load_content", post_id: post_id },
      beforeSend: function(){
        $("#loading-animation").show();
        $("#content > article").fadeOut();
      },
      success: function(response){
        $("#content > article").html(response).fadeIn();
        $("#loading-animation").hide();
        return false;
      }
    });

  });

})(jQuery);

我将ajaxify.php文件中的所有内容保存如下：

add_action ( 'wp_ajax_nopriv_load_content', 'my_ajax_load_content', 99 );
add_action ( 'wp_ajax_load_content', 'my_ajax_load_content', 99 );
function my_ajax_load_content(){
    $post_id = $_POST[ 'post_id' ];
    $post = get_post( $post_id );
    $response = array( apply_filters( 'the_content', $post->post_title ), apply_filters( 'the_content', $post->post_content ) );
    echo '<div class="entry-header"><h1 class="entry-title">'.$response[0].'</h1></div><div class="entry-content">'.$response[1].'</div>';
    die(0);
}
wp_enqueue_script( 'my-ajax-request', get_template_directory_uri() . '/js/ajax.js', array( 'jquery' ) );
wp_localize_script( 'my-ajax-request', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

快速提醒：action 必须中的PHP符合您jQuery内的操作。就我而言，它是load_content（例如wp_ajax_nopriv_load_content，wp_ajax_load_content，data:{ action: "load_content" }）。

希望这有助于某人在使用WordPress AJAX时遇到类似的问题。

无法加载AJAX

3 个答案: