javascript - 函数将变量正确回显到 ajax 文件，但在 html 中不显示任何内容

Question

php 变量$testing正确地回显 ajax 文件，但在 html<?php echo $testing;?>中不显示任何内容。

html:

<?php
    get_header();
    ?>
    
    <script type="text/javascript">
        
    var hrefValue;
    
    jQuery(document).ready(function($) {
        $('#bio-box').find('a').mouseover(function() {
            hrefValue = ($(this).attr('href'));
            $.ajax({
                url: '/jakubtrz-portfolio/wp-admin/admin-ajax.php',
                data: {
                    'action': 'php_tutorial',
                    'php_test': hrefValue
                },
                success: function(data){
                    console.log("sent")
                }
            });
        });
    }); 
    
    </script>
    
    <?php echo $testing;?>
    
    <main id="primary" class="site-main">
    <div class="container position-relative my-7">
    
        <div class="row">
            <div class="col-lg-6" id="bio-box">
                <a href="http://localhost:8888/jakubtrz-portfolio/quod-si-ita-se-habeat-non-possit/">Example post link</a>
                <a href="http://localhost:8888/jakubtrz-portfolio/quid-ergo-aliud-intellege/">Example post link2</a>
            </div>
    
            <div class="col-lg-6">
                <div class="featured-image">
                    <?php 
                        $post_id = url_to_postid($testing);
                        echo get_the_post_thumbnail($post_id);
                    ?>
                </div>
            </div>
        </div>
    
    </div>
    </main><!-- #main -->
    
    <?php
    get_footer();

函数.php：

function our_tutorial(){
        if(isset($_REQUEST)){
            $testing = $_REQUEST['php_test'];
    
            echo $testing;
    
            global $wpdb;
            $wpdb->insert(
                $wpdb->prefix.'lms_enroll',
                [
                    'ID' => $testing
                ]
            );
    
        }
        die();
    }
    add_action('wp_ajax_php_tutorial', 'our_tutorial');

Answer 1

解决方案是添加$('#featured-image').html(data);到脚本，将数据输出传递给 html。

var hrefValue;
    
    jQuery(document).ready(function($) {
        $('#bio-box').find('a').mouseover(function() {
            hrefValue = ($(this).attr('href'))
            //console.log(hrefValue)
            $.ajax({
                url: frontendajax.ajaxurl,
                type: 'POST', 
                data: {
                    'action': 'image',
                    'php_test': hrefValue
                },
                success: function(data){
                    $('#featured-image').html(data);
                    //console.log(data);
                }
            });
        });
    }); 

还将 php 行从 html 移动到 function.php：

function fimg() {
    if ( isset( $_POST['php_test'] ) ) {
        $testing = sanitize_text_field( wp_unslash( $_POST['php_test'] ) );
        $post_id = url_to_postid( $testing );
        echo get_the_post_thumbnail( $post_id );
    }
    die();
}
add_action( 'wp_ajax_image', 'fimg' );
add_action( 'wp_ajax_nopriv_image', 'fimg' );

我误解了 ajax 的工作原理。imo最简单的答案是这张图：