无法显示ajax结果WordPress

时间:2018-11-28 08:10:32

标签: php jquery ajax wordpress

我具有以下简单的HTML结构

<button class="aardappel" value="im a value">HENK!</button>
<p class="leeg" value="niks"></p>

应该发生的事情是,一旦我单击按钮,p标记将替换为我的php函数的结果

我有以下jQuery

    jQuery(".aardappel").on("click", function(){
    jQuery.ajax({
        url : ajax_testing.ajaxurl,
        data: {
            action      : "test_printer",
            buttonvalue : jQuery(this).val()
        },
        type: "POST",
        //dataType: "html",
        succes: function(data){
            console.log(data);
            //jQuery(".leeg").html(data);
        },
        error: function(){
            console.log("foutje");
        },
        completed: function(){
            console.log("doe ik iets?");
        }
    })

这是ajax正在调用的功能

add_action( 'wp_ajax_test_printer', 'test_printer' );
add_action( 'wp_ajax_nopriv_test_printer', 'test_printer' );
function test_printer()
{
    $result = <<<HTML

    <p>{$_POST["buttonvalue"]}</p>

HTML;

    echo $result;
    exit();
}

当我按下按钮时,我收到具有以下内容的admin-ajax.php文件 enter image description here

但是当我按下按钮时,控制台中也不会记录任何内容,换句话说,错误,成功和完成都不会触发,因此我无法在页面上显示结果。我在做什么错了?

1 个答案:

答案 0 :(得分:1)

尝试此脚本。错字错误。是success函数而不是succes;

<script>
    jQuery(".aardappel").on("click", function(){
        jQuery.ajax({
            url : ajax_testing.ajaxurl,
            data: {
                action      : "test_printer",
                buttonvalue : jQuery(this).val()
            },
            type: "POST",
            //dataType: "html",
            success: function(data){
                console.log(data);
                //jQuery(".leeg").html(data);
            },
            error: function(){
                console.log("foutje");
            },
            completed: function(){
                console.log("doe ik iets?");
            }
        });
    });

</script>