Javascript WordPress中的Ajax调用返回整个HTML页面作为响应

最令人沮丧的是，这段代码正在工作，然后突然开始返回整个HTML页面，而不仅仅是下面模板中的HTML代码

我正在调用一个ajax函数并向其传递一个如下所示的对象（console.log（data）的结果）：

以下是我的ajax函数：

function mapResults (data) {

        //console.log(data);

        $.ajax({
            type: 'post',
            url: wp_ajax.wp_url,
            data: {action: 'marker_in_viewport', resultsArray: data},
            success: function(result) {
                $('#map-results').html(result);
            },
            error: function(result) {
                console.warn(result);
            }
        });

    }

以下是处理请求的PHP代码：

<?php
add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');

function marker_in_viewport() {

    $locationResults = $_POST['resultsArray'];

      $posts = get_posts(array(
        'post_type' => 'accommodation',
        'post__in' => $locationResults,
        
    ));  

    ?>

    <?php

        //require result template
        //require_once ('map-results.php');

        if( $posts ) { ?>     
            
            <?php foreach( $posts as $post ) {
        
                            $id = $post->ID;
                            $title = get_the_title($id);
                            $location = get_field('location', $id);
                            $permalink = get_permalink( $id );
                            $rooms_available_from = get_field('rooms_available_from', $id);
                            $gallery = get_field('gallery', $id);
        
                            ?>
        
                            <div class="col-md-4 accom-results-cont pb-3">
        
                            <?php if ($gallery) : ?>
        
                                <a href="<?= $permalink; ?>" title="Learn more about <?= $title; ?>">
        
                                    <div class="accom-results-img-cont">
                                
                                        <img class="img-fluid" src="<?= $gallery['url']; ?>" alt="An image of <?= $title; ?>" >
        
                                    </div>
        
                                
        
                            <?php endif; ?>
        
                                
        
                                    <div class="accom-results-data-cont pr-3 pt-3">
        
                                        <?php if ( $title ) : ?>
        
                                            <p class="results-title"><b><?= $title ?></b></p>
        
                                        <?php endif; ?>
        
                                       
        
                                        
        
                                    </div>
                            
                                </a>
                            
                            </div>
        
                        <?php } ?>
        
        <?php } ?>    

<?php wp_die(); ?>

<?php } ?>

在我的页面模板中，我希望在下面的div中填充结果：

<div id="map-results"class="row py-5"></div>

---

你知道我做错了什么吗？

我修改了你的代码。请尝试下面的代码

function mapResults (data) {

    $.ajax({
        type: 'post',
        dataType : "json",
        url: wp_ajax.wp_url,
        data: {action: 'marker_in_viewport', resultsArray: data},
        success: function(result) {
            $('#map-results').html(result.data.html);
        },error: function(result) {
            console.warn(result);
        }
    });

}

您可以使用

ob\u start（）

和

ob\u get\u clean（）

add_action（'wp_ajax_nopriv_marker_in_viewport'、'marker_in_viewport'）；
添加_操作（“wp_ajax_marker_in_viewport”，“marker_in_viewport”）；
函数标记\u在\u视口中（）{
$locationResults=$\u POST['resultsArray']；
$posts=获取_posts（数组(
“职位类型”=>“住宿”，
'post_uuin'=>$locationResults
));  
ob_start（）；
if（$员额）{foreach（$员额为$员额）{
$id=$post->id；
$title=获取标题（$id）；
$location=get_字段（'location'，$id）；
$permalink=get\u permalink（$id）；
$gallery=get_字段（'gallery'，$id）；
$rooms\u available\u from=get\u字段（'rooms\u available\u from'，$id）；
?>
不要使用wp_die（），它返回html，使用just die（）
经过大约一周的尝试，终于可以使用了

下面是我在js/script.js中的AJAX函数

 $.ajax({
            type: 'post',
            //dataType: 'json',
            url: map_ajax_obj.ajaxurl,
            data: {action: 'marker_in_viewport', resultsArray: data, nonce: map_ajax_obj.nonce},
            success: function(result) {
                //console.log(result);
                $('#map-results').html(result);
            },
            error: function(result) {
                console.warn(result);
            }
        });

在functions.php文件中，我将wp-admin.php放入队列并进行本地化，如下所示

    function load_req_scripts()
    {
        wp_register_script( 'custom-js-script', get_template_directory_uri() . '/js/script.js', array( 'jquery'), '', true);
        wp_enqueue_script( 'custom-js-script' );
    
        wp_localize_script(
            'custom-js-script', //I think this is a dependancy on the above script though not entirely sure
            'map_ajax_obj',
            array (
               
                'ajaxurl' => admin_url('admin-ajax.php'), 
                'nonce'  => wp_create_nonce('ajax_nonce')
            )
        );
    }
    add_action( 'wp_enqueue_scripts', 'load_req_scripts' );

require_once('ajax/accommodation-ajax.php'); //where to handle and return the data to the ajax call

下面是my-ajax.php文件中的函数

<?php

function marker_in_viewport() {

    $locationResults = $_POST['resultsArray'];

    if (!empty($locationResults)) {

    $posts = get_posts(array(
        'post_type' => 'accommodation',
        'post__in'  => $locationResults    
    ));

    if( $posts ) {  
        
        foreach( $posts as $post ) {

        $id        = $post->ID;
        $title     = get_the_title($id);
        $location  = get_field('location', $id);
        $permalink = get_permalink( $id );
        $gallery   = get_field('gallery', $id);
        $rooms_available_from = get_field('rooms_available_from', $id);
        ?>
        <div class="col-md-4 accom-results-cont pb-3">
            <a href="<?php echo $permalink; ?>" title="Learn more about <?php echo $title; ?>">
                <?php if ( $gallery ) : ?>
                    <div class="accom-results-img-cont">
                        <img class="img-fluid" src="<?php echo $gallery['url']; ?>" alt="An image of <?php echo $title; ?>" >
                    </div>
                <?php endif; ?>
                <div class="accom-results-data-cont pr-3 pt-3">
                    <?php if ( $title ) : ?>
                        <p class="results-title"><b><?php echo $title; ?></b></p>
                    <?php endif; ?>
                </div>
            </a>
        </div>
    <?php } //end for each 
    
    } //end if posts

    } //end if not empty

    else {

        echo "No results found please search again!";

    }

    wp_die();
}

add_action( 'wp_ajax_nopriv_marker_in_viewport', 'marker_in_viewport');
add_action( 'wp_ajax_marker_in_viewport', 'marker_in_viewport');

对下列事项：

//block users from admin if not admin
function blockusers_wps_init() {
        if ( is_admin() && ! current_user_can( 'administrator' ) && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
                wp_redirect( home_url() );
                exit;
        }
}

add_action( 'init', 'blockusers_wps_init' );

我支持这一点-使用
ob\u start（）
和
ob\u get\u clean（）
可能会有很大帮助。您好，感谢您查看代码，它现在返回时会在ajax调用的错误函数中发出警告。
Console.warn（result）未定义。
我怀疑从我的ajax函数发送的数据没有到达正确的php函数，有没有办法测试这一点？只是将
wp_die（）；
替换为
die（）；
似乎不起作用。
&& ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX )

//block users from admin if not admin
function blockusers_wps_init() {
        if ( is_admin() && ! current_user_can( 'administrator' ) && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
                wp_redirect( home_url() );
                exit;
        }
}

add_action( 'init', 'blockusers_wps_init' );