无法让 AJAX 加载答案

【问题标题】：Cannot Get AJAX To Load无法让 AJAX 加载
【发布时间】：2016-01-12 20:18:02
【问题描述】：

这里是 HTML 导航：

<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 个小时里搜索了 Google，但没有找到确切的答案。

【问题讨论】：

标签： php jquery html ajax wordpress

【解决方案1】：

1，您必须确保您的脚本在正确的元素处触发

2、你应该把 :"action":"load-content" 改成 action: 'load-content' （去掉action处的双引号）

【讨论】：

感谢您的建议，但我的 Ajax 问题仍然存在。虽然我能够加载脚本，但它没有按预期工作。有什么想法吗？

【解决方案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' );

希望对你有帮助。

【讨论】：

这确实将我的 ajax.js 文件与包含 MyAjax var 的
无。即使我在 ajax.js 中包含 console.log(e) 也没有

【解决方案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' ) ) );

快速提醒：PHP 中的 action必须与您在 jQuery 中的行为相匹配。就我而言，它是load_content（例如wp_ajax_nopriv_load_content、wp_ajax_load_content、data:{ action: "load_content" }）。

希望这可以帮助解决 WordPress AJAX 类似问题的人。

【讨论】：