Question

我最近刚开始使用WordPress，我做了一个关于Ajax的小教程。

目前，我正在尝试检索帖子的内容，然后将其显示在另一个div（使用短代码创建）的同一页面上。一切正常，除了响应显示在整个页面上并且不显示在选定的div中 - 从而清除其他内容。

请在下面的代码中找到我写的代码：

 ////CREATING SHORT CODES
        public function posts_callback($atts = null, $content = null) {
        $args = array("post_type" => "post", "orderby" => "date", "order" => "DESC", "post_status" => "publish");
        $posts = new WP_Query($args);
        ?>
        <div style ="text-align: center" >
            <?php
            if ($posts->have_posts()):
                while ($posts->have_posts()):
                    $posts->the_post();
                    $link = admin_url('admin-ajax.php?action=post_content&post_id='.get_the_ID());
                    ?>
                    <div id="posts_callback_div" style="display: inline-block; width: 300px; border-color: #333; border-style: solid; border-width: 2px; margin-top: 15px;">        
                        <a class='short_code_link' data-post-id='<?php echo get_the_ID() ?>' href='<?php echo $link ?>' >
                            <?php echo get_the_title(); ?>
                        </a>
                    </div>
                    <?php
                endwhile;
            else:
                echo "";
                die();
            endif;
            ?>
        </div>
        <?php
    }

    public function custom_container_shortCode() {
        ?>
        <div class="custom_container" id="custom_container"  style="width: 300px; border-color: #333; border-style: solid; border-width: 2px; margin-top: 15px;">
            Hi, if you can still see me then the ajax is not working!
        </div>
        <?php
    }

// JQUERY PART

(function ($) {
    'use strict';
    $(".short_code_link").click(function (e) {
        e.preventDefault();
        postID = jQuery(this).attr("data-post-id");
        jQuery.ajax({
            type: "GET",
            url: myAjax.ajaxurl,
           // dataType: "html",
            cache: false,
            data: {
                action: "post_content",
                post_id: postID,
            },
            success: function (response) {
                jQuery("#custom_container").html(response);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Status: " + textStatus);
                alert("Error: " + errorThrown);
            }
        });
    });
})(jQuery);

// PHP处理程序

//CREATING AJAX API TO RETRIEVE POST CONTENT
public function post_content() {
    $post_id        = $_GET["post_id"];
    $content_post   = get_post($post_id);
    $content        = $content_post->post_content;
    $content        = apply_filters('the_content', $content);
    $content        = str_replace(']]>', ']]$gt', $content);
    echo $content;
    die();
}

你能指出我做错了什么吗？

Answer 1

您对服务器进行异步调用并返回一些html。成功后，您将使用id="custom_container"替换元素的所有内容以及从服务器返回的任何内容。

这里有概述的功能：

       ...
       success: function (response) {
            jQuery("#custom_container").html(response);
        },
       ...

您可能希望将#custom_container替换为其他选择器，具体取决于您要将收到的html放置在何处。

请注意，新创建的html不会被初始化。如果您有任何脚本将事件/行为绑定到页面加载的元素，则需要将事件/行为添加到上面概述的html函数内新添加的success中，否则您将需要使用泛型页面加载时的绑定。

WordPress：Ajax响应覆盖整个页面

1 个答案: