為什么我的PHP代碼沒有將json數據返回給我的Ajax調用？

Question

我正在測試使用AJAX登錄到Wordpress。 但是我的PHP代碼沒有將數據返回給我的Ajax腳本。

我想知道我是否想念一些東西。

我的模板看起來像這樣

// This code is at the top of my template

function authenticate($username, $password) {
    global $user;

    $data = array();
    $data['user_login'] = $username;
    $data['user_password'] =  $password;
    $data['remember'] = false;

    $user = wp_signon( $data, false );

    if ( is_wp_error($user) ) {
        $result = array('login' => false, 'error' => $user->get_error_message());
    }
    if ( !is_wp_error($user) ) {
        $result = array('login' => true);
    }

    echo json_encode($result);
}

if (isset($_REQUEST['user_login'])) {
    authenticate($_REQUEST['user_login'], $_REQUEST['user_password']);
}

(...) // My HTML starts here

<form name="loginform" action="<?= $_SERVER['REQUEST_URI'] ?>" method="post">
(...)
</form>

這是我的JS代碼

$('.login-button').on('click', function(e){
    e.preventDefault();

    var $form       = $('form');
    var form_action = $form.attr('action');
    var form_data   = {
        'user_login': $form.find('.user_login').val(),
        'user_password': $form.find('.user_psw').val(),
    };

    $.ajax({
        type: "POST",
        url: form_action,
        data: form_data,
        dataType : 'json',
        success: function(result){
            cl(result); // <-- This is not outputting anything
        }
    });
});

我可能只是在這里缺少一些基本知識，但不確定是什么。

Answer 1

 if (isset($_REQUEST['user_login'])) { authenticate($_REQUEST['user_login'], $_REQUEST['user_password']); } (...) // My HTML starts here 

您正在輸出JSON，但之后也將立即輸出HTML。 這使得JSON無效。 如果有一個參數，應該通過傳遞給error函數的參數之一來警告這一點。

僅在不輸出JSON時才需要輸出HTML。

將exit()放在if語句中將完成此工作（盡管我將事情重構為具有兩個不同的文件來處理不同種類的輸出，並基於if包括不同的輸出……或者更進一步，並使用完整的MVC框架）。

您還忘記了設置header("Content-Type: application/json"); 當您輸出JSON時。

Answer 2

您應該將AJAX回調添加到functions.php中 ，而不是頁面模板中。

function so_34356392_ajax_auth() {
    if (isset($_REQUEST['user_login'])) {
        authenticate($_REQUEST['user_login'], $_REQUEST['user_password']);
    }
}
add_action( 'wp_ajax_so_34356392_auth', 'so_34356392_ajax_auth' );
add_action( 'wp_ajax_nopriv_so_34356392_auth', 'so_34356392_ajax_auth' );


function authenticate($username, $password) {
    global $user;

    $data = array();
    $data['user_login'] = $username;
    $data['user_password'] =  $password;
    $data['remember'] = false;

    $user = wp_signon( $data, false );

    if ( is_wp_error($user) ) {
        $result = array('login' => false, 'error' => $user->get_error_message());
    }
    if ( !is_wp_error($user) ) {
        $result = array('login' => true);
    }

    echo json_encode($result);
    wp_die();  // this is required to terminate immediately and return a proper response
}

然后您的AJAX函數將更改為：

var form_data   = {
    'action': 'so_34356392_auth',  // Target the callback in functions.php
    'user_login': $form.find('.user_login').val(),
    'user_password': $form.find('.user_psw').val(),
};

$.ajax({
    type: "POST",
    url: form_action,
    data: form_data,
    dataType : 'json',
    success: function(result){
        cl(result);
    },
    error: function() {
        cl('Cannot retrieve data.');
    }
});

在Codex中閱讀有關在WordPress中使用AJAX的更多信息。

Answer 3

if (isset($_REQUEST['user_login'])) {
    // |-- you need an echo
    echo authenticate($_REQUEST['user_login'], $_REQUEST['user_password']);
    exit();
}